Question

我尝试在文本框中输入文字，当我点击按钮时，它会提醒我文本。我似乎无法让变量在函数中起作用。我不确定＆＃34; var i = document.getElementById（＆＃39; apple＆＃39;）。value;＆＃34;是正确的。

document.querySelector("input[type=button]").addEventListener("click", function(event){

alert(i);});

<form>
Enter:<br>
<input type="text" name="inputbox" id="apple">
<input type="button" name="alert" value="alert">
</form>

<script>
var i = document.getElementById('apple').value;

document.querySelector("input[type=button]")
     .addEventListener("click",function(event){

alert(i);});
</script>

演示：http://codepen.io/michaelaharvey/pen/QyKvme

我也尝试过：

var i = form.inputbox.value;

但是那不起作用

Answer 1

document.querySelector("input[type=button]")
.addEventListener("click",function(event){
  var i = document.getElementById('apple').value;
  alert(i);
});

您需要在点击时查询值。

Answer 2

问题是当DOM加载时，您将元素的值存储在变量中。因此，当click事件被触发时，value属性是一个空字符串（或者加载DOM时的值）。

在触发click事件时检索值：

Updated Example

document.querySelector("input[type=button]").addEventListener("click", function(event) {
  var value = document.getElementById('apple').value
  alert(value);
});

如何使用可变参数调用函数

2 个答案: