如何在HTML中使用JavaScript获取input的值?

创建一个input元素

在HTML中，我们需要先创建一个input元素。这个元素可以是文本输入框、密码输入框、单选按钮、复选框等等。以下是创建一个文本输入框和一个提交按钮的示例：

<form id="myForm">
  <input type="text" id="myInput">
  <input type="submit" value="提交">
</form>

获取input元素的引用

要获取input元素的值，我们需要在JavaScript中先获取这个input元素的引用。可以使用document.getElementById()方法，接受一个参数，即我们要获取的元素的ID。

var myInput = document.getElementById("myInput");

获取input元素的值

我们可以使用引用来获取input元素的值。使用value属性即可获取文本输入框的值。

var inputValue = myInput.value;

使用input值做任何事情

我们可以使用这个值来做任何事情。如打印值到控制台。

console.log(inputValue);

获取input的值并阻止表单的默认提交行为

用户往往是在提交表单时才需要获取input的值。为此我们需要使用addEventListener()方法来进行监听表单的submit事件。当用户点击提交按钮时，我们可以获取input的值，然后做任何事情。我们还需要阻止表单的默认提交行为。

document.getElementById("myForm").addEventListener("submit", function(event){
  event.preventDefault(); // 阻止表单的默认提交行为
  var inputValue = document.getElementById("myInput").value; // 获取input的值
  console.log(inputValue); // 打印input的值到控制台
});

以上就是如何在HTML中使用JavaScript获取input的值的方法。有关此话题的任何问题都可以与我随时交流。

如果您喜欢这篇文章，请务必点赞，分享给您的朋友们，谢谢观看！