为什么我在控制台中看到的是 undefined 而不是输入的值

Question

我想将我输入的值记录到控制台，但每次我单击提交按钮时它都会记录未定义，请问为什么会这样。下面是我的代码

<!--html-->
<body>
  <form action="" id="form">
     <input type="text" name="" id="input" />
     <input type="submit" name="" id="submit" />
  </form>
</body>

 <!--script-->
 <script>
     const form = document.querySelector('#form');
     const input = document.querySelector('#input');
     const submit = document.querySelector('#submit');

     function adds(e) {
       console.log(e.target.value);

        e.preventDefault();
     }
     form.addEventListener('submit', adds);   
 </script>

Answer 1

e.target 是一个 HTMLFormElement。它没有 value 属性.

如果您想获取输入的值，请通过 input 或 form.firstChild 引用它。

const form = document.querySelector('#form');
const input = document.querySelector('#input');
const submit = document.querySelector('#submit');

function adds(e) {
  console.log(form.firstChild.value);

  e.preventDefault();
}
form.addEventListener('submit', adds);

<body>
  <form action="" id="form">
    <input type="text" name="" id="input" />
    <input type="submit" name="" id="submit" />
  </form>
</body>

为什么我在控制台中看到的是 undefined 而不是输入的值

why am I seeing undefined in my console instead of the value of the input

html

javascript

dom

addeventlistener

dom-events