gpt4 book ai didi

javascript - 添加列表项

转载 作者:行者123 更新时间:2023-12-02 18:02:04 24 4
gpt4 key购买 nike

有人可以帮我解决初学者代码中的错误吗?我正在尝试将列表项添加到列表中,并尝试更改我在 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. changeDiv()中定义loop()

我认为你想要#2,所以我在你的代码中进行了一些更正:

fiddle

我选择#2 的原因是:

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

答案#4 是相似的,它会为changeDiv 和循环创建一个闭包,从而它们都可以访问它们需要的内容。但是,我不想对现有的逻辑 block 进行太多更改,以免阻碍增量学习。但是,人们绝对可以为包含在 changeDiv() 中的 loop() (这不是真正的循环,而是一个 setter)提出一个论点——尽管你会可能会删除此时单独的函数调用并更多地集成代码。

关于javascript - 添加列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20437386/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com