Bookmarklet not changing text in textbox

Question

I have created this bookmarklet to highlight the username and password boxes on a page. I can change the colour of the boxes, but if I try to change the text in the box, it doesn't work:

<a href="javascript:void(var boxes= $(':text, :password');var selectionBox = $(':password');selectionBox.val('password');for(var i = 0; i < boxes.length;i++){if(boxes[i] == selectionBox[0]){boxes.eq(i-1).val('login');}})">Password box highlighter</a>

I have tried .text = '', .value = '' and .val('').

Thanks.

Answer 1

Wrap the code to execute into a function-call:

<a href="javascript:void(function(){var boxes= $(':text, :password');var selectionBox = $(':password');selectionBox.val('password');for(var i = 0; i < boxes.length;i++){if(boxes[i] == selectionBox[0]){boxes.eq(i-1).val('login');}}}())">Password box highlighter</a>

Explanation: void expects an expression(only 1 expression).

An expression is any valid unit of code that resolves to a value

Your code already breaks with the first var-keyword, because declaring a variable is not an expression.

When you wrap the code into a function-call, the expression is the function-call itself, no matter which code will be executed inside the function.