jQuery invalid left-hand side error

Question

I'm receiving a console error for this line:

$("#note" + noteCount).val() = note;

Here is the full function:

function addNotes() {
    noteCount++;
    var note = $("#noteInput").val();
    console.log("Note: " + note);
    console.log("Note Count: " + noteCount);
    var display = document.createElement("div");
    document.getElementById("displayContainer").appendChild(display);
    display.className = "noteDisplay";
    display.id = "note" + noteCount;
    $("#note" + noteCount).val() = note;
}

As you can see i'm creating a div with id 'note' + note count but i'm not sure how to select it to change its value.

Answer 1

Better use textContent property as you are creating a DIV

 var display = document.createElement("div"); 
 display.id = "note" + noteCount;
 display.textContent = note;

OR, .text() as DIV doesn't have value property and you need to provide it as a parameter to the method call:

$("#note" + noteCount).text(note);

---

As you are using jQuery create HTML using it

var display = $("<div>", {
    "text" : note,
    "id" : "note" + noteCount,
    "class" : "noteDisplay"     
});

display.appendTo('#displayContainer');

Answer 2

Simply try

$("#note" + noteCount).val( note );

val invocation returns a value which you cannot override with another value.

val = note; //has a different meaning, still not correct for your scenario

but

val() = note; //not allowed 

since value is already computed via function call and hence left side is not a variable , but a value and you cannot assign a value to a value

Answer 3

Your way of assigning the value is wrong . You need to pass it as an argument to the val function because its a function and not a property

$("#note" + noteCount).val(note) ;

See the JQUERY DOCS

Answer 4

You should put the value inside () of val when using jQuery;

$("#note" + noteCount).val(note);