📅 最后修改于: 2023-12-03 14:57:15.295000 🧑 作者: Mango
在 Web 开发中，我们经常需要从用户那里获取输入值。而对于按钮的单击事件，如果我们要获取输入值，需要用到 JavaScript。
在 HTML 中，我们需要创建一个输入框和一个按钮，以便用户在输入框中输入内容，并单击按钮发送数据。
<input type="text" id="myInput">
<button onclick="getValue()">获取输入值</button>
在 JavaScript 中，我们可以使用 getElementById() 方法获取输入框的值，并将其存储在变量中以供后续使用。接着，我们可以在控制台中输出这个值，也可以将其显示在网页上。
以下是一个简单的 JavaScript 函数，用于获取输入框的值并将其显示在网页上：
function getValue(){
var inputVal = document.getElementById("myInput").value;
document.getElementById("result").innerHTML = inputVal;
}
我们还需要在 HTML 中添加一个 <div> 元素，以便将输入框的值显示在其中。
<div id="result"></div>
<!DOCTYPE html>
<html>
<head>
<title>获取按钮单击的输入值</title>
</head>
<body>
<input type="text" id="myInput">
<button onclick="getValue()">获取输入值</button>
<div id="result"></div>
<script>
function getValue(){
var inputVal = document.getElementById("myInput").value;
document.getElementById("result").innerHTML = inputVal;
}
</script>
</body>
</html>
以上代码将创建输入框、按钮和用于显示输入框值的 <div> 元素，以及用于获取输入框值的 JavaScript 函数。单击按钮后，在 <div> 元素中显示输入框的值。