javascript - 输入值返回 null

Question

HTML:

    <div class="form-group">
      <input class="input-sol form-control" id="focusedInput appendedInput sol" placeholder="Enter number" type="text" required>
      <button class="btn btn-warning btn-large" id="submit" type="button" onClick="getUserChoice()">Get Images</button>
    </div>

JavaScript:

    function getUserChoice() {
      var user_sol = document.getElementById("sol").value;

...

当我输入一个值并单击按钮时，我的函数被触发，但在控制台中出现以下错误:

    Uncaught TypeError: Cannot read property 'value' of null
      at getUserChoice (index.js:44)
      at HTMLButtonElement.onclick (index.html:53)

从下拉列表中选择的其他值都可以，但不适用于此输入。

Answer 1

function getUserChoice() {
  var user_sol = document.getElementById("sol").value;
  console.log(user_sol);
}

<div class="form-group">
  <input id="sol" class="input-sol form-control" placeholder="Enter number" type="text" required>
  <button class="btn btn-warning btn-large" id="submit" type="button" onClick="getUserChoice()">Get Images</button>
</div>

正如评论中提到的，您的问题是您的 ID 属性无效。每个元素只能有 1 个 ID，并且它必须是唯一的。阅读此内容:https://www.w3schools.com/tags/att_global_id.asp

如您所见，您只需修复 ID 属性即可进行代码工作。