Javascript函数将输入输入变量[关闭]答案

【问题标题】：Javascript function takes input into variable [closed]Javascript函数将输入输入变量[关闭]
【发布时间】：2021-06-01 03:20:00
【问题描述】：

我正在创建一个网站，我想知道当一个函数发生时，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>

【问题讨论】：

非常抱歉，我完全忘记接受答案了。感谢您的回答，代码完美运行
很高兴为您提供帮助:)

标签： javascript html jquery css frontend

【解决方案1】：

简单。试试：

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>

【讨论】：

【解决方案2】：

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

element.value 用于 Vanilla，$(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>

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

【讨论】：