代码不工作：使用Javascript在HTML中向列表动态添加项目_Javascript_Html_Append

代码不工作：使用Javascript在HTML中向列表动态添加项目

javascript html

代码不工作：使用Javascript在HTML中向列表动态添加项目,javascript,html,append,Javascript,Html,Append,编辑：JSFiddle表示代码本身是好的。有人能解释一下为什么它不能作为一个chrome扩展正确执行吗我正在尝试为自己做一个简单的Chrome列表扩展。这是我的密码： HTML: 待办事项清单待办事项清单添加待办事项清单：还有Javascript： <script type="text/javascript"> document.getElementById("add").addEventListener("click", function(){

编辑：JSFiddle表示代码本身是好的。有人能解释一下为什么它不能作为一个chrome扩展正确执行吗

我正在尝试为自己做一个简单的Chrome列表扩展。这是我的密码：

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>


document.getElementById（“add”）.addEventListener（“单击”，函数）（）{
var节点=document.createElement（“li”）；
var textnode=document.createTextNode（document.getElementById（“textbox”）.value）；
node.appendChild（textnode）；
document.getElementById（“myList”）.appendChild（节点）；
}
)

当我在输入字段中输入文本，然后单击按钮时，什么也没有发生。

我通过添加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>


待办事项清单
window.onload=函数（）{
document.getElementById（“add”）.addEventListener（“单击”，函数）（）{
var节点=document.createElement（“li”）；
var textnode=document.createTextNode（document.getElementById（“textbox”）.value）；
node.appendChild（textnode）；
document.getElementById（“myList”）.appendChild（节点）；
}
) 
};
待办事项清单
添加
待办事项清单：

试试这个：

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

它所说的，任何控制台错误，在下面的JSFIDLE中为我测试。上面的JSIDdle显示它工作正常。它在这些JSIDdle示例中工作，因为默认情况下，JSIDdle将JS代码包装在窗口onload处理程序中（如框架和扩展标题下的下拉列表中所指定）。你的实际代码没有这个功能。我把javascript部分放在它自己的文件中，现在扩展就可以工作了！谢谢

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