Javascript: Unexpected token }

Question

I keep getting an unexpected token } error when trying to pass this.value as an argument.

In my body I have:

<input type="text" size="3" id="rbgTextbox" onkeypress="if (ValidateRGBTextboxInput(event)) ChangeBackgroundColor("+this.value+"); else return false;">

The functions:

<script type="text/javascript">
    function ValidateRGBTextboxInput(e) {
      return ById('rbgTextbox').value.length < 6 &&
       (e.which >= 48 &&
        e.which <= 57 ||
        e.which >= 65 &&
        e.which <= 70 ||
        e.which >= 97 &&
        e.which <= 102);
    }

    function ChangeBackgroundColor(color) {
      alert(color);
      ById('gameArea').style.backgroundColor = '#'+color;
      ById('nextPiece').style.backgroundColor = '#'+color;
    }
  </script>

If I change ChangeBackgroundColor("+this.value+"); for ChangeBackgroundColor('000000'); I get no more error, but of course I need the pass the text input's value as the argument.

score 2 · Accepted Answer · edited May 23 '17 at 11:59

You don't need the quotes. If you have the double quotes you are breaking the string required by the onkeypress attribute on the input field. Hope that makes sense ;)

<input type="text" 
       size="3" 
       id="rbgTextbox" 
       onkeypress="if (ValidateRGBTextboxInput(event)) ChangeBackgroundColor(this.value); else return false;">

This popular post on SO may help you understand quotes in Javascript.

score 1 · Answer 2 · answered Jan 12 '14 at 13:00

1

Try placing the if statement in a function and calling the function. It would achieve a couple things. It makes you code more readable as well as will allow to easily you place some alerts within your if and else to see what is really going on.

answered Jan 12 '14 at 13:00

Lawrence Thurman

657
8
15

Captain John · Answer 3 · 2014-01-12T13:24:58.723

I don't think you need the + this.value + ' statement just this.value.

Additionally I would suggest that you just add a click handler to the html and avoid additional logic as shown below.

http://jsfiddle.net/9BtAM/13/

Note I think your design needs to improve further as the element value is not set untill after key press event. So you need to concatenate the new key press if acceptable to the existing element value.

 <input type="text" size="3" id="rbgTextbox" onkeypress="CheckKeyPress(event);" />

With the javascript here

 function CheckKeyPress(event) { 
    var element = document.getElementById('rbgTextbox');

     if (ValidateRGBTextboxInput(keyPressEvent)) 
         ChangeBackgroundColor(element.value); 
     else 
         return false;
}

Which is much easier to follow. As a rule you don't want complex javascript directly in the html.

That use of `event` won't work except on IE (and browsers like Chrome that throw IE-specific code a bone). Further, the way you're calling `CheckKeyPress`, `this` will not be the element reference (it'll be the global object). — T.J. Crowder, Jan 12 '14 at 13:04

Javascript: Unexpected token }

3 Answers3