从表单提交中添加数组元素

Question

我正在学习 JS 以及如何添加数组元素。我想将表单中的信息作为新的数组元素提交并显示在下方。找不到使用 JS 的方法。有人可以帮忙吗？到目前为止，在我的代码下方找到它不起作用：

   <!DOCTYPE html>
    <html>
      <body>
        <form>
          New array element:<br>
          <input id="age" type="text" name="firstname" value="">
          <br>
          <br>
          <input type="submit" value="Submit" onclick="myFunction()">
        </form> 
        <p id="demo"></p>

        <script>
          var fruits = ["Banana", "Mango", "Apple"]
          var newArray = document.getElementById("age").value;
          fruits.push(newArray);
          document.getElementById("demo").innerHTML = fruits;
        </script>
      </body>
    </html>

谢谢！

Answer 1

您在单击按钮时调用 myFunction()，但 <scripts>

中没有 myFunction() 的函数声明

   <!DOCTYPE html>
<html>
<body>


New array element:<br>
<input id="age" type="text" name="firstname" value="">
<br>
<br>
<input type="button" value="Submit" onclick="myFunction()">


<p id="demo"></p>

<script>
    var fruits = ["Banana", "Mango", "Apple"];
function myFunction(){
var newArray = document.getElementById("age").value;
fruits.push(newArray);
document.getElementById("age").value = "";
document.getElementById("demo").innerHTML = fruits;
 }
</script>

</body>
</html>

编辑

将 fruits 数组设为全局数组，即根据 OP 的要求将 var fruits = ["Banana", "Mango", "Apple"]; 移出函数。

Answer 2

您需要定义 myFunction()

的行为

<!DOCTYPE html>
<html>

    <body>
        <form onsubmit="myFunction()">New array element:
            <br>
            <input id="age" type="text" name="firstname" value="">
            <br>
            <br>
            <input type="submit" value="Submit">
        </form>
        <p id="demo"></p>
        <script>
            function myFunction() {
                var newArray = document.getElementById("age").value;
                fruits.push(newArray);
                document.getElementById("demo").innerHTML = fruits;
            }
            var fruits = ["Banana", "Mango", "Apple"];
            myFunction(); // initialize demo innerHTML
        </script>
    </body>

</html>

从表单提交中添加数组元素

Add array element from form submission

html

javascript

getelementbyid

inserthtml