JavaScript点击按钮无弹窗问题咨询：附代码示例

嘿，我来帮你揪出这段代码的问题啦！

核心问题 #

你这段代码的bug出在获取输入框值的时机不对：
你把var field = document.querySelector("#field").value;写在了全局作用域里，页面刚加载完成就会执行这行代码——这时候用户还没在输入框里输入任何内容呢！所以field变量从一开始就存的是空字符串，等你点击按钮触发write函数时，alert的只是这个早就固定好的空值，自然看不到任何内容。

怎么修复？调整代码结构完全可以解决！ #

只需要把「获取输入框值」的操作挪到write函数内部，这样每次点击按钮的时候，才会实时读取输入框当前的内容。

修正后的代码如下：

JavaScript代码

var button = document.querySelector("#write"); 
button.addEventListener("click", write); 

function write() { 
    // 每次点击按钮时，才去获取输入框的当前值
    var field = document.querySelector("#field").value; 
    alert(field); 
    // 额外补充：如果想把内容显示到页面的result区域，可以加这行
    // document.querySelector("#result").textContent = field;
}

HTML结构（原结构没问题，直接复用即可）

<meta name="viewport" content="width=device-width"> 
<input type="text" name="field" id="field"> 
<button type="button" id="write">Write</button> 
<div id="result"></div>

这样修改后，你再在输入框里输入内容，点击Write按钮，就能正确弹出你输入的文本啦～

内容的提问来源于stack exchange，提问作者Computerlucaworld