Question

HTML

<div>
    <label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
    <label>Point：<input id="aqi-value-input" type="text"></label><br>
    <button id="add-btn">OK</button>
</div>

的JavaScript

var CityName = document.getElementById('aqi-city-input'); 
var CityMore = document.getElementsByClassName('122');    
var Quality = document.getElementById('aqi-value-input'); 
var Button = document.getElementById('add-btn');

console.log(document.getElementById('aqi-city-input'));  //null
console.log(CityName);                                   //null
console.log(CityMore);                                   //html object
console.log(Quality);                                    //null
console.log(Button);                                     //null

除了getElementsByClassName之外还有null，我有什么不对吗？

Answer 1

您必须在HTML文档之后包含JavaScript，如下所示。如果您使用的是JavaScript文件，则必须在HTML文档之后包含此文件。

<div>
  <label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
  <label>Point：<input id="aqi-value-input" type="text"></label><br>
  <button id="add-btn">OK</button>
</div>
<script src="path/to/your/script.js"></script>
<script>
  var CityName = document.getElementById('aqi-city-input'); 
  var CityMore = document.getElementsByClassName('122');    
  var Quality = document.getElementById('aqi-value-input'); 
  var Button = document.getElementById('add-btn');

  console.log(document.getElementById('aqi-city-input')); 
  console.log(CityName);                               
  console.log(CityMore);                                 
  console.log(Quality);                           
  console.log(Button);    
</script>

您也可以在HTML文档之前使用JavaScript，但在这种情况下，您必须将代码包装在事件监听器DOMContentLoaded中，以便在加载HTML内容时执行JavaScript（并且JavaScript可以看到HTML元件）。

如果是JavaScript文件，您应该将代码包装到事件监听器中。

<script src="path/to/your/script.js"></script> <!-- content is wrapped in event listener -->
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var CityName = document.getElementById('aqi-city-input'); 
    var CityMore = document.getElementsByClassName('122');    
    var Quality = document.getElementById('aqi-value-input'); 
    var Button = document.getElementById('add-btn');

    console.log(document.getElementById('aqi-city-input')); 
    console.log(CityName);                               
    console.log(CityMore);                                 
    console.log(Quality);                           
    console.log(Button);    
  });
</script>
<div>
  <label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
  <label>Point：<input id="aqi-value-input" type="text"></label><br>
  <button id="add-btn">OK</button>
</div>

Answer 2

将您的javascript代码移到HTML下面。
或者在页面加载完成后执行。
在JQuery中，您可以执行以下操作：

<script>
    $(document).ready(function() {
        //... your code ...//
    });
</script>

getElementById无法访问加载的DOM

2 个答案: