CODEWITHSUNDEEP
javascriptjqueryhtml
Xander
Xander

Reputation: 1011

Buttons text not changing in JavaScript?

I'm trying to change the text of a button to that of a value stored in a variable. The button is currently blank and not even using a fixed value like .value = "test"; is working.

HTML:

<div id="addContainer">
    <textarea id="listTitleInput" class="textarea" placeholder="Add the title of your list here, then click 'Add List'." rows="10" cols="50"></textarea>
    <button id="addListBtn" data-role="button">Add List</button>
</div>

<div id="listDisplayContainer">
</div>

JS:

$(document).ready(function () {

//LISTS
    var listTitleInput = document.getElementById("listTitleInput");
    var addListBtn = document.getElementById("addListBtn");
    var listCount = localStorage.getItem("listCount"); 

if (listCount === null) {
        noteCount = 0;
    }

//ADD LISTS
    function addList() {
        if ($("#listTitleInput").val() == "") {
            alert("Please give your list a title, then click 'Add List'.");
        } else {
            listCount++;
            var list = $("#listTitleInput").val();
            console.log("List Count: " + listCount);
            console.log(list);
            var display = document.createElement("button");
            document.getElementById("listDisplayContainer").appendChild(display);
            display.className = "ui-btn";
            display.id = "list" + listCount;
            $("#list" + listCount).value = list;

        }
    }

//Lists
    addListBtn.addEventListener("click", addList);

});

Upvotes: 1

Views: 768

Answers (2)

mcheah
mcheah

Reputation: 1326

Looks like you need to change $("#list" + listCount).value = list; to $("#list" + listCount).text(list);

value is not a property and val() doesn't work for a button.

Upvotes: 2

Cjmarkham
Cjmarkham

Reputation: 9681

The problem is that you are confusing native DOM attributes with jQuery ones.

$("#list" + listCount).value = list;

$("#list" + listCount) is a jQuery object so it doesn't use the native javascript properties that you may be used to. (value=)

What you are looking for is:

$("#list" + listCount).html(list);

Or

$("#list" + listCount).text(list);

Since list is a string value, it will be best to use .text

Upvotes: 1

Related Questions