嘿，我来帮你揪揪代码里的问题～ 这类弹窗+输入联动的需求，最容易踩这几个坑：

常见问题1：DOM元素获取时机不对 #

如果你的JS代码写在<input>和<button>标签前面，浏览器还没渲染这些元素就执行JS，会导致获取到的元素是null，自然没法绑定事件或者读取值。

常见问题2：事件绑定写错了 #

比如直接写button.onclick = alertInput()，这会导致页面加载时就直接执行弹窗，而不是点击按钮才触发——因为你加了括号，相当于立刻调用函数了。

常见问题3：没正确读取输入框的值 #

比如只获取了input元素，但没取它的.value属性，弹窗就会显示[object HTMLInputElement]而不是输入的内容。

给你一个能正常运行的示例代码 #

<!-- HTML部分 -->
<input type="text" id="userInput" placeholder="输入点内容试试">
<button id="alertBtn">点我弹窗</button>

<script>
// JS部分
// 等DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取DOM元素
  const inputBox = document.getElementById('userInput');
  const alertButton = document.getElementById('alertBtn');

  // 绑定点击事件
  alertButton.addEventListener('click', function() {
    // 读取输入框的值
    const inputValue = inputBox.value.trim();
    // 弹窗显示内容，空值可以加个提示
    alert(inputValue || '请先输入内容哦～');
  });
});
</script>

代码说明： #

• 用DOMContentLoaded确保DOM完全加载后再操作元素，避免获取到null。
• 用addEventListener绑定点击事件，比直接写onclick更灵活，也不容易覆盖其他事件。
• 读取inputBox.value拿到输入的文本，加trim()去掉前后空格，空值时给个友好提示。

内容的提问来源于stack exchange，提问作者A.choussaut