-3

我正在创建一个网站，我想知道当一个函数发生时，html 输入中的文本将如何自动转换为变量。例如，我有一个当前没有值的变量 x。如果我在输入中输入单词“hi”并出现按钮 onclick 函数，变量 x 现在将是“hi”的值。我该如何实现？我当前的代码：

<!DOCTYPE html>
<html>
<body>


<form>
  
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>



</body>
</html>
4

2 回答 2

0

jQuery 和 Vanilla 的解决方案都很简单

element.value适用于香草和$(element).val()jQuery。

使用 onclick 事件：

香草

function getValue() {
  var value = document.getElementById("lname").value;
  console.log(value);
}
<input type="text" id="lname" name="lname"><br><br>
<button id="submit" onclick="getValue()">Submit</button>

jQuery

function getValue() {
  var result = $("#lname").val();
  console.log(result);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="lname" name="lname"><br><br>
<button id="submit" onclick="getValue()">Submit</button>

使用事件监听器

香草

document.getElementById("submit").addEventListener("click", () => {
  var value = document.getElementById("lname").value;
  console.log(value);
});
<input type="text" id="lname" name="lname"><br><br>
<button id="submit">Submit</button>

jQuery

$("#submit").click(function() {
  var value = $("#lname").val();
  console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="lname" name="lname"><br><br>
<button id="submit">Submit</button>

注意我删除了表格。否则，当您单击提交时，您将被重定向到另一个页面。

于 2021-06-01T03:43:44.727 回答
0

简单的。尝试：

var x;
document.querySelectorAll('input')[1].addEventListener("click", ()=>{
  x = document.querySelector('input').value;
  console.log("x is: "+x);
})
<!DOCTYPE html>
<html>
<body>
  <form>
    <input type="text" id="lname" name="lname"><br><br>
    <input value="Submit" type="button">
  </form>
</body>
</html>

于 2021-06-01T03:47:35.390 回答