Invalid assignment left-hand side, javascript

Question

I am sure I am doing something silly here:

var addhtml = '<div id="leftbio" class="left-float">'
+= '<div id="bioname">e["screen_name]</div>'
+= '<div id="biophoto"><img src="e["profile_image_url"]"/></div>'
+= '<div id="biodetails">e["description"]</div>'
+= '</div>';             // invalid assignment left-hand side
console.log(addhtml);

And Netbeans is telling me that invalid assignment left-hand side error.

Whats wrong?

Answer 1

You don't need += to concatenate, you just need +

This is ok

var addhtml = '<div id="leftbio" class="left-float">'
+ '<div id="bioname">e["screen_name]</div>'
+ '<div id="biophoto"><img src="e["profile_image_url"]"/></div>'
+'<div id="biodetails">e["description"]</div>'
+ '</div>';         
console.log(addhtml);

Answer 2

+= means "take the thing on the left, add this to it, and store the result in the thing on the left". The left-hand side of your += is a literal (the first one is '<div id="leftbio" class="left-float"> ). You can't assign to literals.

Put it another way, a += b basically means a = a + b . You can see how that doesn't work if a is a literal rather than a variable.

You just want + there:

var addhtml = '<div id="leftbio" class="left-float">'
+ '<div id="bioname">e["screen_name]</div>'
+ '<div id="biophoto"><img src="e["profile_image_url"]"/></div>'
+ '<div id="biodetails">e["description"]</div>'
+ '</div>';
console.log(addhtml);

To give you an idea of the difference between + and += :

var a, b;
a = "foo";
b = a + "bar";  // Doesn't modify `a`
console.log(a); // "foo"
console.log(b); // "foobar"

vs.

var a, b;
a = "foo";
b = a += "bar"; // Modifies `a` (assigning the result to `b` is unusual -- very -- but valid)
console.log(a); // "foobar" - note it's changed
console.log(b); // "foobar"

---

Off-topic :

I'd also recommend indenting the subsequent lines of the assignment statement, but that's just style:

var addhtml = '<div id="leftbio" class="left-float">'
    + '<div id="bioname">e["screen_name]</div>'
    + '<div id="biophoto"><img src="e["profile_image_url"]"/></div>'
    + '<div id="biodetails">e["description"]</div>'
    + '</div>';
console.log(addhtml);

Answer 3

The assignment (=) is not necessary, you can just use +. There are two other ways to construct multiline strings:

// method 1: use continuation \
 var addhtml = '\
        <div id="leftbio" class="left-float"> \
            <div id="bioname">e["screen_name]</div> \
            <div id="biophoto"><img src="e["profile_image_url"]"/></div> \
            <div id="biodetails">e["description"]</div> \
        </div>';

//method 2: use an array and join the elements
 var addhtml = [
       '<div id="leftbio" class="left-float">',
       ' <div id="bioname">e["screen_name]</div>',
       ' <div id="biophoto"><img src="e["profile_image_url"]"/></div>',
       ' <div id="biodetails">e["description"]</div>',
       '</div>'
     ].join('');

Answer 4

x += y is shorthand for x = x + y which is not what you want here.

Either use:

var addhtml = '<div id="leftbio" class="left-float">';
addhtml += '<div id="bioname">e["screen_name]</div>';
addhtml += '<div id="biophoto"><img src="e["profile_image_url"]"/></div>';
addhtml += '<div id="biodetails">e["description"]</div>';
addhtml += '</div>';

or:

var addhtml = '<div id="leftbio" class="left-float">'
    + '<div id="bioname">e["screen_name]</div>'
    + '<div id="biophoto"><img src="e["profile_image_url"]"/></div>'
    + '<div id="biodetails">e["description"]</div>'
    + '</div>';

Answer 5

Don't need =

var addhtml = '<div id="leftbio" class="left-float">'
    + '<div id="bioname">e["screen_name]</div>'
    + '<div id="biophoto"><img src="e["profile_image_url"]"/></div>'
    + '<div id="biodetails">e["description"]</div>'
    + '</div>';             // invalid assignment left-hand side
    console.log(addhtml);

Answer 6

You cannot chain attribution operators like += .

var addhtml = '<div id="leftbio" class="left-float">'
              + '<div id="bioname">e["screen_name]</div>'
              + '<div id="biophoto"><img src="e["profile_image_url"]"/></div>'
              + '<div id="biodetails">e["description"]</div>'
              + '</div>';             // invalid assignment left-hand side
console.log(addhtml);