Добавить элемент массива из отправки формы

Я изучаю 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>

Спасибо!

Источник

2 ответа

Решение

Ты звонишь myFunction() по нажатию кнопки, но нет объявления функции для myFunction() в <scripts>

   <!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 массив как глобальный, т.е. перемещенный var fruits = ["Banana", "Mango", "Apple"]; вне функции в соответствии с требованиями OP.

Источник

Вам нужно определить поведение 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>
Источник
Другие вопросы по тегам