CODEWITHSUNDEEP
javascripthtml
YXC.Coder
YXC.Coder

Reputation: 41

getElementById cannot access the loaded DOM

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

There return null except the getElementsByClassName, do I have something wrong ?

Upvotes: 1

Views: 809

Answers (2)

WHY
WHY

Reputation: 278

Move your javascript code below your HTML.
Or execute it after the page has finished loading.
In JQuery you can do like below:

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

Upvotes: 0

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

You have to include your JavaScript after the HTML document like the following. If you are using a JavaScript file you have to include this after the HTML document too.

<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>

You can also use the JavaScript before your HTML document, but in this case you have to wrap your code in a event listener DOMContentLoaded so the JavaScript executes if the HTML content is loaded (and JavaScript can see the HTML elements).

In case of a JavaScript file you should wrap your code into the event listener.

<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>

Upvotes: 2

Related Questions