Buttons text not changing in JavaScript?

Question

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);

});

<button> elements don't have a "value" property. You have to change the .innerHTML to change the content. — Pointy
– Pointy, Commented Apr 25, 2017 at 21:03
Also I get confused a little when I see a mix of jQuery and native DOM code. Why not stick with one or the other? — Pointy
– Pointy, Commented Apr 25, 2017 at 21:05
Unfortunatley $("#list" + listCount).innerHTML = list; isn't working either — Xander
– Xander, Commented Apr 25, 2017 at 21:07
Thats because innerHTML is a native DOM atrtribute. You need to use .html() — Cjmarkham
– Cjmarkham, Commented Apr 25, 2017 at 21:08
This kind of thing is why mixing DOM stuff and jQuery stuff always makes my head spin. Go with one or the other until you're really comfortable with the relationship. — Pointy
– Pointy, Commented Apr 25, 2017 at 21:09

mcheah · Accepted Answer · 2017-04-25 21:09:38Z

2

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.

answered Apr 25, 2017 at 21:09

mcheah

1,32615 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cjmarkham · Accepted Answer · 2017-04-25 21:09:28Z

1

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

answered Apr 25, 2017 at 21:09

Cjmarkham

9,7336 gold badges52 silver badges85 bronze badges

Collectives™ on Stack Overflow

Buttons text not changing in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related