Question

HTML

 <form role="form">
      <div class="form-group">
          <label for="search" style="display:none">Search:</label>
          <input type="search" class="form-control" id="searchInput" placeholder="Type a game to search">
          <button type="submit" id="search" class="btn btn-default">Search</button>
      </div>
 </form>

JS

  $("#search").click(function(){   
     var query = document.getElementById("#searchInput").value;
     console.log(query); 
  });

我希望#search的onclick事件将输入字段设置为变量，所以稍后我可以在其他地方使用它并将其传递给其他函数，但是控制台返回null？

*在此之前我已经包含了jQuery

Answer 1

document.getElementById函数只需要实际的id，而不是CSS选择符号（#id），这就是为什么返回null，因为它实际上是在搜索id为#searchInput的对象，如下所示：

 <input type="search" class="form-control" id="#searchInput" placeholder="Type a game to search">

Answer 2

如果您已经在使用jQuery，可以使用jQuery选择searchInput（而不是js - getElementById）用以下内容替换该行：

var query = $("#searchInput").val();

或者，只需省略你行中的＃（如我所建议的那样）：

var query = document.getElementById("searchInput").value;

document.getElementById不会设置变量

2 个答案: