使用unshift（）使用javascript将表单输入添加到数组

本文介绍了使用unshift（）使用javascript将表单输入添加到数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试通过表单将元素添加到数组。我正在使用unshift（）方法。以下代码无效，我想知道为什么。

I am trying to add elements to an array via a form. I am using the unshift() method. The code below doesn't work and I would like to know why.

<form> <input id="input"> </input> <input type = "button" id="button"> Click me </input> </form> <script> var input = document.getElementById("input").value; var button = document.getElementById("button"); var myArray = []; myArray.unshift(input); button.onclick = function alerted (){ alert(myArray); }; </script>

推荐答案

引用的代码立即运行 加载页面时。表单字段中将没有任何内容，因此其值将为'’

Your quoted code runs immediately when the page is loaded. The form field won't have anything in it then, so its value will be ''. When you alert that, the default toString operation on the array will result in '' and the alert will be blank.

您想运行 unshift 代码来响应用户事件，例如单击按钮，而不是比马上。您可以通过将 input 设置为元素（从该行中删除 .value ）然后移动您的行来实现通过 unshift 进入要分配给 onclick 的函数，并添加 .value 那里：

You want to run your unshift code in response to a user event, such as the button being clicked, rather than right away. You can do that by setting input to be the element (remove .value from that line) and then moving your line with unshift into the function you're assigning to onclick, adding the .value there:

button.onclick = function alerted (){ myArray.unshift(input.value); alert(myArray); };

其他说明：

您永远不会写< / input> 。通常，您根本不会关闭 input 标记。如果您正在编写XHTML（可能不是），则将 / 放入主输入中这样的代码：< input id = input /> 。但同样，您可能不是在编写XHTML，而只是在编写HTML。

You never write </input>. Normally you don't close input tags at all. If you're writing XHTML (you probably aren't), you'd put the / within the main input tag like this: <input id="input" />. But again, you're probably not writing XHTML, just HTML.

输入按钮位于其 value 属性中，而不位于开始和结束标记之内。 （您应该使用带有 button 元素的开始和结束标签，而不是 input 的元素。）

The value (caption) of an input button goes in its value attribute, not content within opening and closing tags. (You would use opening and closing tags with the button element, not input.)

总而言之，这是一个极简更新：实时复制 | 源

Taking all of that together, here's a minimalist update: Live copy | source

<form> <input id="input"><!-- No ending tag --> <input type = "button" id="button" value="Click me"><!-- No ending tag, move value where it should be --> </form> <script> var input = document.getElementById("input"); // No .value here var button = document.getElementById("button"); var myArray = []; button.onclick = function alerted (){ myArray.unshift(input.value); // Moved this line, added the .value alert(myArray); }; </script>