gpt4 book ai didi

javascript - 动态添加按钮 HTML

转载 作者:行者123 更新时间:2023-12-01 01:59:13 35 4
gpt4 key购买 nike

我需要一个具有功能的按钮列表,但在网站实际加载之前,这些按钮是不可见的。这是我一直在使用的实现:

var list = [1, 2, 3, 4, 5, 6, 7, 8];
function placeAnotherNumber(num)
{
document.getElementById("NumLabel").innerHTML += " " + num;
}

function putButtons()
{
var temp = "";
for(i = 0; i < list.length; i++)
{
temp += "<button onclick='placeAnotherNumber(" + list[i] + ");'>" + (i+1) + "</button>";
}
document.getElementById("ButtonLabel").innerHTML = temp;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="putButtons()";>Load</button>
<br/>
<label id='ButtonLabel'></label>
<br/>
<label id='NumLabel'></label>

</body>
</html>

加载按钮后,我希望功能是将我按下的任何数字添加到按钮下方的标签中。它会这样做,但也会在后面添加一个 1。它使用该号码以及列表中的第一个成员调用该方法两次。

在 Chrome 中,这可以按预期工作,但我正在处理的实际代码仍然无法正常工作。

这是我学习 HTML/JavaScript 的第二周,我不确定问题是什么。可能只是实现不当。我什至不确定我应该在谷歌上搜索哪些术语来解决这个问题(动态按钮添加?)。

关于如何修复此方法或我应该如何真正执行此任务有什么想法吗?

提前致谢。

最佳答案

上面的代码有效,当您单击另一个按钮时,它会突出显示 1 按钮,但它不会在最后添加的数字后附加任何 1。如果将标签元素更改为 div,那么看起来您也不会单击 1。你不应该为这样的事情使用标签。一般来说,这些应该保留用于输入表单元素上的标签。

关于javascript - 动态添加按钮 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50750094/

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