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属性即可进行编码。

Answer 2

class属性接受以空格分隔的类名列表。类设计用于表示组，元素可以是多个组的成员。

id是唯一标识符，如社会安全号码。一个元素只能有一个元素，没有元素可以共享另一个元素。

focusedInput和appendedInput听起来更像是类而不是ID。将它们移动到class属性。

Answer 3

请参阅以下回答Can an html element have multiple ids?

html元素上不能有多个id - s。输入的ID不是"sol"，这就是document.getElementById("sol")返回null的原因。

输入值返回null

3 个答案: