正在添加列表项

Adding a list item

本文关键字：列表 添加      更新时间：2024-04-08

有人能帮我解决初学者代码中的一个错误吗？我正在尝试将一个列表项添加到列表中，并尝试用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>

我想你想要的是其中之一：

  1. 将counter的范围定为全球性（yuk）
  2. 围绕所有内容创建一个闭包，并在其中声明counter
  3. 您可以在调用counter时将其传递到loop()
  4. 在CCD_ 6中定义CCD_

我想你想要#2，所以我在你的代码中做了几个更正：

小提琴

我选择#2的原因是：

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

答案#4的相似之处在于，它将为changeDiv和循环创建一个闭包，从而使它们都可以访问所需内容。然而，我不想过多地更改您现有的逻辑块，从而阻碍增量学习。但是，可以肯定地为changeDiv()中包含的loop()（它实际上不是一个循环，而是一个setter）提出一个论点——尽管此时可能会删除单独的函数调用，并进一步集成代码。

本质上，您需要：

  • 在全局作用域中声明counter（否则loop()无法访问它）
  • 在loop()中，return语句必须是LAST。之后的任何事情都不会被执行

我稍微修改了一下逻辑，最后的代码是：

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。

相关文章：