I can't use jQuery library, and I am getting TypeError: document.getElementById(…) is null when 'translating' to pure javascript
Question
I can't use jQuery library on my project so I need to get this little jQuery snippet to 'pure' javscript
$(document).ready(function(){
$listHeight = $('ul#home-news-list').height();
$child = $('ul#home-news-list li:last-child');
while ($listHeight > 150) {
$($child).remove();
$listHeight = $('#home-news-inner ul').height();
$child = $('ul#home-news-list li:last-child');
console.log($listHeight);
}
});
So it basically removes the last list item until list height is less than 150. My javascript skills are not that good so this is the code I came up with and it gives me TypeError: document.getElementById(...) is null on the first line, so I have no idea if the rest is worth anything:
var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.getElementById('home-news-list li:last-child');
while (listHeight > 150) {
child.parentNode.removeChild(child);
var listHeight = document.getElementById('home-news-list').offsetHeight();
child = document.getElementById('home-news-list li:last-child');
}
Could you please tell me what I wrong with the code?
I am calling this script in <head></head>
3 answers
solution1
2 2013-06-20 20:02:51
Your main problem seems to be the use of getElementById, this method call can't be used with the same parameters as JQuery and so becomes cubersome and more verbose within pur javascript, also offsetHeight is a property instead of a method:
var listHeight = document.getElementById('home-news-list').offsetHeight;
var parent = document.getElementById('home-news-list');
var child = parent.lastChild;
while (listHeight > 150) {
child.parentNode.removeChild(child);
listHeight = document.getElementById('home-news-list').offsetHeight;
child = parent.lastChild;
}
solution2
1 ACCPTED 2013-06-20 20:08:08
If you want to use css selectors like jquery does then you can use javascript's querySelector and querySelectorAll methods.
var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.querySelector('home-news-list li:last-child');
while (listHeight > 150) {
child.parentNode.removeChild(child);
var listHeight = document.getElementById('home-news-list').offsetHeight();
child = document.querySelector('home-news-list li:last-child');
}
This is the same as you code but with querySelector substituted when getElementByid does not work.
solution3
1 2013-06-20 20:13:22
First off, your script in <head> will execute immediately before the browser has a chance to parse your DOM; so you should place the script at the bottom of the page, and to ensure that the script executes only when the DOM is ready:
window.onload = function () {
...
};
The first line should work if you change offsetHeight() to offsetHeight (it's a property, not method). For the rest, you need to dig through CSS selector and DOM api to figure out how jQuery do it...
I'm sorry that you can't use jQuery, the DOM API is a terrifying monster.
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.