Ugh!!’s Greymatter Honeypot

Distracting the Mind with Information Overload

Javascript Gotcha: Invalid Assignment Left-Hand Side

I ended up scratching my head today over a line of Javascript that was just not playing ball. The line was this:

opener.document.forms[0].plugin-media4pic.value = "avatar.jpg";

All I was trying to do was update a field on the parent form that called a popup with an image that had been uploaded by the user. Sounds pretty straightforward, and I had used that type of code in the past when building the WP Auctions plugin. So I expected it to work right off the bat.

Man scratching the back of his head

Instead, I kept getting an error saying “invalid assignment left-hand side”. I rechecked my code. I walked through the page DOM to ensure I wasn’t specifying something that didn’t exist. I rechecked my code. I went for a walk. I rechecked my code. I made some tea. I rechecked my code. I scratched my head for a bit. I rechecked my code. Nothing. I still kept getting the pesky error.

Eventually, out od desperation, I started trying different things, and found out what the problem was!

Turns out the problem was a form field called plugin-media4pic. For some inexplicable reason, Javascript interpreted the “-” as a minus sign and was trying to evaluate the left-hand side of the assignment expression above. Don’t ask me why, but changing the “-” to an “_” solved the problem. Can anyone explain why this was happening?

Hope you guys don’t run into something else inexplicable today.

13 Responses to “Javascript Gotcha: Invalid Assignment Left-Hand Side”

  1. I remember having a similar problem, I solved it by using the elements array of the Form object instead, so your example code would become:

    opener.document.forms[0].elements['plugin-media4pic'].value = “avatar.jpg”;

    hope this helps :)

  2. Owen says:

    @Mike: Thanks for your comment. Yeah. That would have worked too. Just took me ages to figure out what the problem was!

  3. That’s not so inexplicable, “-” just isn’t a valid character for identifiers in javascript. It’s reserved for uses like the minus sign.

    Seriously, how else will Javascript know what you want when you talk about:

    this.a-that.b

    Are we accessing property b within propterty “a-that”, or are we subtracting this.b from this.a? So, the minus sign just can’t be used in bare identifiers.

    It’s true that you can use form names that contain characters that don’t make valid JS identifiers, and in that case the bracket syntax saves the day.

    As to why using a _ worked instead, there might be a provision in there somewhere which aliases abc-def and abc_def to mean the same thing. I for one would not count on such a provision however, as [] syntax clarifies your intentions unambiguously.

    Mangia. :D

    - – Jesse

  4. Art says:

    Did you know that this post comes up #2 in Google for the term “invalid assignment left-hand side”?

    Well it does, and I’m really glad because you just saved me some serious time trying to research the error.

    Kudos!

  5. Zachary says:

    Thank you so much! I have spent a couple of days trying to figure out what was wrong with a function I created and out of frustration turned to Google and found this page after a lot of searching. This fixed many of the problems I was having. Thanks again!

  6. josh says:

    It was actually a case of blah.style.background-color=’blah’; for me. if i did background_color, the rest of the js ran ok, but i had to use backgroundColor to actually set and access the element’s color.

  7. magicrebirth says:

    thanks man that saved me tons of time (and coffees!)

  8. Eric Pugh says:

    I had a bit of ruby code generating a variable in JS that was failing:

    check_var__ = false;

    I had spaces in core.solr.name, so I swapped to using dashes. And then had more errors, thank you for this post, it highlighted my problem!

  9. droope says:

    Gotta love javascript error reporting.

  10. daniel says:

    I’m having the same problem : I’m using dynamic variables and when I try to assign the value to the dynamic variable I receive the same error as you did.

    This is part of my code:
    for (var i=0; i<(title.length-1);i++){
    eval ("var title"+i) = title[i].get('html').toString().replace('‘, ”); //and the code goes on…

    What I want to do is to create variables like these: title0, title1, title2…title(i++)

    Any idea why this doesn’t work?

  11. Zikki says:

    Aww yeah! i am so glad I found this post. I looked for a similar problem and found a “=” instead of a “==” in one of my if statements. I’m telling you its the small little errors that take up so much time.

    Thanks to Owen for posting this!

    @Daniel
    Sorry I can’t help you on that one. Are you sure it’s that line? if you click on the error on firefox error console, it will take you to the line where it found the error.
    best of luck.

  12. Naveen says:

    How to go about doing the same for params passed ?? :(
    I want to pass -1 as a param and JS is killing me with this..

  13. David Peach says:

    hey guys. I got the same message, but I got it when passing data to a php script via ajax. In the data field I didn’t begin the data string with a ‘?’ symbol. Doh!

    Hope this helps someone out there.

    peace!.