fiddle

Question

有人可以帮我解决初学者代码中的错误吗？我正在尝试将列表项添加到列表中并尝试更改我在javascript中添加它的列表的ID。提前致谢。

<html>
<head>
<script>
window.onload = init;
function init() {
    var button = document.getElementById("submit");
    button.onclick = changeDiv;
}
function changeDiv() {
    var counter=1
    var name = "ul";
    var textInput = document.getElementById("textInput");
    var userInput = textInput.value;
    alert("adding " + userInput);
    var li = document.createElement("li");
    li.innerHTML = userInput;
    var ul = document.getElementById("ul" + loop());
    ul.appendChild(li);
}

function loop() {
    return counter;
    if (counter==3){
        counter==0;
    }
    counter++;
}
</script>
</head>
<body>
    <form id="form">
        <input id="textInput" type="text" placeholder="input text here">
        <input id="submit" type="button">
    </form>
    <ul id="ul1">
    </ul>
    <ul id="ul2">
    </ul>
    <ul id="ul3">
    </ul>
</body>

Answer 1

我认为你想要的就是其中之一：

将counter的范围设为全球（yuk）
围绕所有内容创建一个闭包，并声明counter那里
当你打电话时，你可以将counter传递给loop()。
在loop()中定义changeDiv()。

我认为你想要＃2，所以我在你的代码中进行了几次修正来填补它：

fiddle

我选择＃2的原因是：

闭包允许您的逻辑获得应用程序所需的资源
但保护其他应用程序可能正在运行的范围（现在或将来）不会受到应用程序可能尝试访问该范围的任何更改的影响。例如，如果您将计数器声明为全局，则所有其他javascript可能具有对它的读/写访问权限，这可能会对您演示的代码，其他代码或两者产生负面影响
使您当前的初学者代码尽可能保持不变
让您使用javascript的一个非常重要的方面进行编程，这将有助于您今天和将来学习

答案＃4类似，因为它会为changeDiv和loop创建一个闭包，从而可以访问他们所需的内容。但是，我并不想过多地更改现有的逻辑块以阻止增量学习。但是人们肯定可以在loop()中包含changeDiv()（它不是一个真正的循环而是一个setter）的参数 - 尽管你可能会删除单独的函数调用指出并更多地整合代码。

Answer 2

基本上，您需要：

在全局范围内声明counter（loop()无法访问它）
在loop()中，return语句必须是最后一项。之后的任何事情都不会被执行。

我稍微改变了逻辑，最后的代码就是这样：

window.onload = init;
var counter=1;
function init(){
    var button = document.getElementById("submit");
    button.onclick = changeDiv;
}
function changeDiv(){
    var name = "ul";
    var textInput = document.getElementById("textInput");
    var userInput = textInput.value;
    var id = "ul" + loop();
    alert("adding " + userInput + " to " + id);
    var li = document.createElement("li");
    li.innerHTML = userInput;
    var ul = document.getElementById(id);
    ul.appendChild(li);
}

function loop(){
    var tmp = counter++;

    if (counter==4){
        counter=1;
    }
    return tmp;
}

请注意loop()功能中的更改。

我还更改了changeDiv()功能，以在警报中显示列表ID。

添加列表项

2 个答案:

fiddle