Login

I tried to use this code below, which adds buttons in slideshow on my site:

window.onload = function loadContIcons() {
var elem = document.createElement("img");
elem.src = "http://arno.agnian.com/sites/all/themes/agnian/images/up.png";
elem.setAttribute("class", "up_icon");

var id = "views_slideshow_controls_text_next_slideshow-block";
if (id !== 0) {
document.getElementById(id).appendChild(elem);
} else console.log("aaaaa");

var elem1 = document.createElement("img");
elem1.src = "http://arno.agnian.com/sites/all/themes/agnian/images/down.png";
elem1.setAttribute("class", "down_icon");

var id1 = "views_slideshow_controls_text_previous_slideshow-block";
if (id1 !== 0) {
document.getElementById(id1).appendChild(elem1);
} else console.log("aaaaa");
}

On the front page, where I have slideshow everything works good, but on the other pages the error `Cannot read property 'appendChild' of null` occurs.

Your condition `id !== 0` will always be different that zero because you are assigning a string value. On pages where the element with id `views_slideshow_controls_text_next_slideshow-block` is not found, you will still try to append the img element, which causes the `Cannot read property 'appendChild' of null` error.

Instead of assigning a string value, you can assign the DOM element and verify if it exists within the page.

window.onload = function loadContIcons() {
var elem = document.createElement("img");
elem.src = "http://arno.agnian.com/sites/all/themes/agnian/images/up.png";
elem.setAttribute("class", "up_icon");

var container = document.getElementById("views_slideshow_controls_text_next_slideshow-block");
if (container !== null) {
container.appendChild(elem);
} else console.log("aaaaa");

var elem1 = document.createElement("img");
elem1.src = "http://arno.agnian.com/sites/all/themes/agnian/images/down.png";
elem1.setAttribute("class", "down_icon");

container = document.getElementById("views_slideshow_controls_text_previous_slideshow-block");
if (container !== null) {
container.appendChild(elem1);
} else console.log("aaaaa");
}

The element hasn't been appended yet, therefore it is equal to null. The Id will never = 0. When you call getElementById(id), it is null since it is not a part of the dom yet unless your static id is already on the DOM. Do a call through the console to see what it returns.

For all those facing a similar issue, I came across this same issue when i was trying to run a particular code snippet, shown below.

<html>
<head>
<script>
var div, container = document.getElementById("container")
for(var i=0;i<5;i++){
div = document.createElement("div");
div.onclick = function() {
alert("This is a box #"+i);
};
container.appendChild(div);
}
</script>

</head>
<body>
<div id="container"></div>
</body>
</html>

[Looking at the error in the console for the above code.][1]

[1]:

Since the document.getElementById is returning a null and as null does not have a attribute named appendChild, therefore a error is thrown. To solve the issue see the code below.

<html>
<head>
<style>
#container{
height: 200px;
width: 700px;
background-color: red;
margin: 10px;
}

div{
height: 100px;
width: 100px;
background-color: purple;
margin: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var div, container = document.getElementById("container")
for(let i=0;i<5;i++){
div = document.createElement("div");
div.onclick = function() {
alert("This is a box #"+i);
};
container.appendChild(div);
}
</script>
</body>
</html>

I hope this helps. :)

Just reorder or make sure, the (DOM or HTML) is loaded before the JavaScript.

empjvfpbhy

timothyspqpwko

stork93161

Protamarahj

Eduardo618852