How to fix undefined divs in javascript?
Question
For Example I Type
var x1 = document.getElementsByClassName('js-ticket-count');
undefined & HtmlCollection !
x1 = document.getElementsByClassName('js-ticket-count')[0];
it return as undefined? why?
Html Code:
<div class='js-ticket-count'>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<div>
**More Html Stuff Here**
</div>
</div>
3 answers
solution1
1 2020-07-18 22:23:37
Try putting your JS inside an onload listener. Otherwise it's likely your JS is running before the elements have loaded into the DOM.
window.onload = function(){
alert(document.getElementsByClassName('js-ticket-count')[0]);
}
The HtmlCollection you're seeing is basically an array of elements, as there may be multiple elements with a certain class name. You're returning the first element with [0] .
solution2
0 ACCPTED 2020-07-18 22:35:45
- you can use
DOMContentLoadedevent to make sure that document is loaded like this:
document.addEventListener("DOMContentLoaded", function(){
var x1 = document.getElementsByClassName('js-ticket-count');
x1 = document.getElementsByClassName('js-ticket-count')[0];
console.log(x1)
})
- you can also use
loadevent on window object like this:
window.addEventListener("load", function(){
var x1 = document.getElementsByClassName('js-ticket-count');
x1 = document.getElementsByClassName('js-ticket-count')[0];
console.log(x1)
})
- also make sure that your
scripttag on before ofbodytag close to make sure that the every element is loaded.
solution3
0 2020-07-18 22:38:56
If in case you are using the external JS file then maybe add it at the end of the body element. So your JS file will load after all the HTML elements have been loaded. In this way, JS can read the HTML element. Something like this:
<body>
<div class='js-ticket-count'>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<div>
**More Html Stuff Here**
</div></div>
<script srs="externalJSlink.js"></script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.