JavaScript

Question

我正在使用 html 表单并使用 JS 向按钮添加功能。一旦在文本字段中引入用户名，我就创建了一个来捕获用户名。问题是，当我尝试在控制台上显示用户的输入时，这个输入会出现很短的瞬间然后消失。 `

以下是我的HTML代码：

    <form action="">
        <div>
            <label for="myName">Name</label>
        </div>
        <div>
            <input type="text" name="myName" id="myName" class="name">
        </div>
            <button class="thisOne">Collect Info</button>

    </form>`

下一个是我的JS

` let input_name = document.querySelector('.name');
     let btn = document.querySelector('button');
     btn.addEventListener('click', ()=>{   
     console.log(input_name.value);
      });`

Answer 1

使用事件和 preventDefault 来阻止发送表单。

const input_name = document.querySelector('.name');

const btn = document.querySelector('.thisOne');

btn.addEventListener('click', (e)=>{
  e.preventDefault();
  console.log(input_name.value);
});

<form action="">
  <div>
      <label for="myName">Name</label>
  </div>
  <div>
      <input type="text" name="myName" id="myName" class="name">
  </div>
      <button class="thisOne">Collect Info</button>
</form>

JavaScript - eventListener 方法有问题

JavaScript - Having Trouble With eventListener Method

html

forms

addeventlistener