为何alert函数无法显示输入框中输入的内容？

你的原代码如下：

<input type="text" class="search-bar" placeholder="Search">
<button onclick="show()">Show Your Text</button>
var x = document.getElementsByClassName("search-bar")[0].value;
function show(){
alert(x);
}

问题根源：
你把获取输入框值的代码var x = ...写在了函数外面，页面加载时这行代码就会执行，此时输入框是空的，所以x的值固定为空字符串。后续你在输入框输入内容时，x不会自动更新，点击按钮时alert的还是初始的空值。

另外注意：JS代码需要放在<script>标签内，否则浏览器无法正确解析执行。

修复后的代码有两种写法：

写法一：在点击函数内实时获取输入框值

<input type="text" class="search-bar" placeholder="Search">
<button onclick="show()">Show Your Text</button>
<script>
function show(){
  var x = document.getElementsByClassName("search-bar")[0].value;
  alert(x);
}
</script>

写法二：直接在alert中获取值，简化代码

<input type="text" class="search-bar" placeholder="Search">
<button onclick="show()">Show Your Text</button>
<script>
function show(){
  alert(document.getElementsByClassName("search-bar")[0].value);
}
</script>

这样修改后，每次点击按钮时都会重新获取输入框的当前内容，alert就能正确展示你输入的文本了。

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