Invalid Assignment Left-hand Side, Javascript

I am sure I am doing something silly here: var addhtml = '

' += '

e['screen_name]

' += '

+= to concatenate, you just need +

This is ok

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

Solution 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 = '<divid="leftbio"class="left-float">'
+ '<divid="bioname">e["screen_name]</div>'
+ '<divid="biophoto"><imgsrc="e["profile_image_url"]"/></div>'
+ '<divid="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 changedconsole.log(b); // "foobar"

---

Off-topic:

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

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

Solution 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 = '\
        <divid="leftbio"class="left-float"> \
            <divid="bioname">e["screen_name]</div> \
            <divid="biophoto"><imgsrc="e["profile_image_url"]"/></div> \
            <divid="biodetails">e["description"]</div> \
        </div>';

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

Solution 4:

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

Either use:

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

or:

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

Solution 5:

Don't need =

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

Share