HTML5+JavaScript实现点击按钮弹出含输入内容的alert功能异常求助

问题根因 #

• 存在两个核心错误：
  1. HTML出现重复ID：label和input都设置了id="form-scream"，document.getElementById()只会匹配到第一个出现的对应ID元素，也就是内容为空的label标签，因此无法拿到输入框的内容
  2. <input>输入框的文本内容不能通过innerText属性获取，需要使用value属性读取用户输入值

修正后代码 #

JavaScript代码

function getinput() {
  var input = document.getElementById("form-scream").value;
  alert(input);
};

HTML代码

<div>
  <p>Word
    <!-- 移除label上重复的id，改用for属性关联输入框更符合HTML规范 -->
    <label for="form-scream"></label>

    <input type="text" name="screaming" id="form-scream">

    <button onclick="getinput()"> Click to scream</button>
  </p>
  <script src="assets/js/scream.js"></script>
</div>

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