Не могу получить данные из формы и вывести в консоль

Question

Есть маленикий кусок html, к которому прикреплен отдельным файлом js. Пробовала alert() и console.log но нет никакого результата. В чем проблема?

<!DOCTYPE html>
    <html lang="en">

     <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="jstest.js">
     </head>

      <body>
        <form id="form">
            <input type="text" id="name" name="name">
            <input type="text" id="age" name="age">
            <input type="submit" id="button" value="click">
        </form>
      </body>

     </html>
      <script>
        var form = document.getElementById('#form').value;
        var age = document.getElementById('#name').value;
        var name = document.getElementById('#age').value;
        var button  = document.getElementById('#button');
        button.onclick=func();
        function func(){
          if (age==10){
           alert("You wrote 10");
        }
        else{alert("You wrote something else");
        }
    }
    </script>

Answer 1

Пройдёмся по-порядку:

Когда вы используете document.getElementById, то при передаче аргумента не надо писать #. Это надо писать если вы используете document.querySelector. Когда вы пишите #some-id при вызове document.getElementById, то он ищет не id=some-id, а ищет id=#some-id
Если вам надо повесить событие на сабмит формы, то не надо слушать событие click на кнопке sumbit (не то что невозможно, но лучше не стоит), вместо этого вешайте слушателя на событие submit у формы. Так вы с помощью e.preventDefault() сможете предотвратить перезагрузку страницы, после submit-а
Больше не нужно писать лишний код для того чтобы достать значения полей у формы. Достаточно передать компоненту form в new FormData() и он за вас сделает всю грязную работу. Главное не забыть проставить аттрибут name у инпутов, потому что значения вы будете доставать именно по ним
При взятии значения из инпута вы получите строку, даже если ввели число. Потому очень важно об этом помнить и приводить данные к тому типу, который вам нужен

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="jstest.js">
</head>

<body>
  <form id="form">
    <input type="text" id="nameInput" name="nameValue">
    <input type="text" id="ageInput" name="ageValue">
    <input type="submit" id="button" value="click">
  </form>

  <script>
    const form = document.getElementById('form');
    
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      
      const formData = new FormData(form);
      const age = formData.get('ageValue');
      
      console.log(`typeof ${age} is ${typeof age}`);
      
      checkAge(Number(age));
    })

    function checkAge(age) {
      if (age === 10) {
        console.log("You wrote 10");
      } else {
        console.log("You wrote something else");
      }
    }
  </script>
</body>

</html>

БЛОГ НА HUSL

Не могу получить данные из формы и вывести в консоль

Ответы (1 шт):