Question

我环顾四周如何使用javascript从输入框中获取文本，并且所有帖子都说使用.value，但是，我一直得到“未定义”。我认为问题是当我使用.value时，它会在输入标记中查找value =“”，当它看到没有任何内容时，它会返回“undefined”

我正在尝试抓取用户写入的文本并将其置于警报状态。

HTML：

<input id='myText' type="text">
<input id = 'bot'type="button" value="Click Me">

JS：

var textValue = document.querySelector("#myText").value;
var clickBot = document.querySelector("#bot")

clickBot.addEventListener("click",function(){
alert(textValue)
})

如果我输入：

<input id='myText' type="text" value = 'works'>

然后当我点击按钮时，我会收到一条提示“工作”的提示

Answer 1

您需要在点击处理程序内的文本字段中获取值;否则，每次处理程序运行时，你只会拥有相同的值：

var clickBot = document.querySelector("#bot")

clickBot.addEventListener("click",function(){
    var textValue = document.querySelector("#myText").value;
    alert(textValue);
})

Answer 2

变量textValue已在事件侦听器之外初始化为undefined。每次单击该按钮时，您都需要重新分配该值。

我建议使用textValue来存储选择器，然后在警报中使用textValue.value。

var textValue = document.querySelector("#myText");
var clickBot = document.querySelector("#bot");

clickBot.addEventListener("click", function(){
   alert(textValue.value);
});

Answer 3

在页面加载时，textValue变量的值仅设置为。由于myText输入的值为空，因此空值将存储在textValue变量中并保持该状态。

为了避免这个问题 - 在每个textValue事件中，将它传递到函数体内以刷新 click值。

var clickBot = document.querySelector("#bot"),
    textValue = document.querySelector("#myText");

clickBot.addEventListener("click", function() {
  alert(textValue.value);
})

<input id='myText' type="text">
<input id='bot' type="button" value="Click Me">

Answer 4

var myText=document.querySelector("#myText");
myText.addEventLisrener("change",function(){
var textValue = document.querySelector("#myText").value;
});
var clickBot = document.querySelector("#bot")
clickBot.addEventListener("click",function(){
alert(textValue);
});

你必须在用户怀疑之后更新myText的值。

Javascript值无法使用输入文本框

4 个答案: