代码不起作用：使用 Javascript 将项目动态添加到 HTML 中的列表

Question

编辑：JSFiddle 表明代码本身是好的。任何人都可以深入了解为什么它可能无法作为 chrome 扩展正确执行吗？

我正在尝试为自己制作一个简单的待办事项列表 Chrome 扩展。这是我的代码：

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css">

    <title>To-Do-List</title>
    <script src="popup.js"></script>
    </head>

        <body>
            <div id="header"><h3 id="headtext">TO DO LIST</h3></div>
            <form>
                <input type="text" id="textbox" placeholder="Input"></input>
            </form>
            <button id="add">Add</button>

                <p>TO DO LIST:</p>
                    <ul id="myList">
                    </ul>

        </body>
    </html>

和 Javascript：

<script type="text/javascript">
    document.getElementById("add").addEventListener("click", function(){
    var node = document.createElement("li");
    var textnode = document.createTextNode(document.getElementById("textbox").value);
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
    }
    )
</script>

当我在输入字段中输入文本然后单击按钮时，没有任何反应。

Answer 1

我通过添加 window.onload 函数对您的代码进行了一些修改。

见下文。现在可以使用了。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css">

    <title>To-Do-List</title>
  <script src="popup.js"></script>

<script type="text/javascript">

window.onload = function(){

document.getElementById("add").addEventListener("click", function(){
var node = document.createElement("li");
var textnode = document.createTextNode(document.getElementById("textbox").value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
) 

};



</script>
    </head>

        <body>
            <div id="header"><h3 id="headtext">TO DO LIST</h3></div>
            <form>
                <input type="text" id="textbox" placeholder="Input"></input>
            </form>
            <button id="add">Add</button>

                <p>TO DO LIST:</p>
                    <ul id="myList">
                    </ul>

        </body>
    </html>

Answer 2

试试这个：

window.onload = function () {
  document.getElementById("add").addEventListener("click", function() {
    var node = document.createElement("li");
    var text = document.getElementById("textbox").value;
    node.innerHTML = textnode;
    document.getElementById("myList").appendChild(node);
  });
};

代码不起作用：使用 Javascript 将项目动态添加到 HTML 中的列表

Code not working: Using Javascript to dynamically add items to a list in HTML

javascript

html

append