JavaScript中的按钮文字没有变化?

时间:2017-04-25 21:03:01

标签: javascript jquery html

我正在尝试将按钮的文本更改为存储在变量中的值。该按钮目前是空白的,甚至不使用像.value = "test";这样的固定值。

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

});

2 个答案:

答案 0 :(得分:2)

您似乎需要将$("#list" + listCount).value = list;更改为$("#list" + listCount).text(list);

value不是属性,val()不适用于按钮。

答案 1 :(得分:1)

问题是您将本机DOM属性与jQuery混淆。

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

$("#list" + listCount)是一个jQuery对象,因此它不使用您可能习惯的本机javascript属性。 (value=

您正在寻找的是:

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

或者

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

由于list是字符串值,因此最好使用.text