如何将数组元素添加到div中？

Question

我一直在尝试更改代码，以便我可以从输入表单中获取推送，但是一直没有成功。

<form id="myform">
    <input id="type" type="text" name="input">
    <button onclick="myFunction()">Add number</button>
</form>
<br>
<div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
<script>
    var number= [];
    function myFunction()
    {
        number.push= document.getElementById("type").value;
        var x=document.getElementById("box");
        x.innerHTML=number.join('<br/>');
    }
</script>

- Linda wolfenden

Answer 1

替换：

var x = document.getElementById("demo");

使用：

var x = document.getElementById("box");

如果您想将数组转换为字符串，可以使用JavaScript函数join()：

x.innerHTML = number.join(',');
// Or
x.innerHTML = number.toString();

这是否是你想要的？

- Praveen Kumar Purushothaman

---

哦，谢谢你，那解决了我的问题。我本来想把它留作数组，因为我想添加一个for循环，以便每个输入都会放在新行上，但还不确定如何添加。对于（int i = 0，i < numbers.lenght; i ++）{number display + = numbers（i）=“<br>; - Linda wolfenden

你想让每个项目都在新的一行对吗？不需要使用 for 循环。只需将 x.innerHTML = number.join(',') 替换为 x.innerHTML = number.join('<br />') 即可。简单易行。 - Praveen Kumar Purushothaman

好的，我的头快要爆炸了。假设我想从输入表单中获取推送号码，我已经试图将它们链接在一起几个小时了，但是没有成功。我已经删除了大部分的尝试，只剩下了输入框。请问有什么帮助吗？ - Linda wolfenden

您可以使用以下代码：number.push(document.myform.input.value) - Praveen Kumar Purushothaman

有意义但不工作，我可能错过了引号或其他简单的东西。 - Linda wolfenden

好的，否则你可以这样做。为“input”提供一个“ID”，然后使用“document.getElementById('id').value”。它肯定会起作用！ :) - Praveen Kumar Purushothaman

Answer 2

您需要将数组进行转换，例如：

x.innerHTML=number.join(",");

并且：

var x = document.getElementById("box");

- user1647981

---

数组具有toString()功能，因此不需要。 - Brett Zamir

当将某个值赋给字符串属性时，toString 方法会被隐式调用；只有在需要使用非默认格式时，才需要使用 join 方法。 - RobG

最好的方法是使用实时评估器进行检查。由于还没有解决一些功能问题（也许现在有更好的解决方案），我感到有些内疚，但我仍然发现单击工具栏按钮以获取实时HTML编辑器随时在Ted的https://addons.mozilla.org/en-us/firefox/addon/extension-developer/扩展中使用非常有帮助。 - Brett Zamir

Answer 3

var arr = [];

function func () {
  arr.push('5');
  document.getElementById('box').innerHTML = arr.toString();
}

- Danil Speransky

---

不需要调用 toString，将字符串属性赋值会隐式地调用 toString。 - RobG