Ricky Ricky - 1 month ago 12
CSS Question

Cannot read property 'style' of null(...) Javascript

From what I can see, this is generally a loading issue.
I.E: The

slide
element is not loading in before this is being triggered.

Or, I suspect that it is not actually getting the width which returns the null part, due to my inexperience and have not set it correctly to get the
width
.

Could you please help narrow this down for me, and either inform me how I get the
innerWidth
correctly for it to be defined or explain where exactly it is going wrong.

As it stands, the loop is currently infinite due to this error.



function Slide() {
ul = document.getElementById("slide");
liItems = ul.children;
w = document.body.clientWidth;
imageNumber = liItems.length;
imageWidth = liItems[0].children[0].width;
// Set UL's Width as total width of all images in slider.
ul.style.width = parseInt(imageWidth * imageNumber) + "px";
// Left + Right Arrows
leftArrow = document.getElementById("left");
rightArrow = document.getElementById("right");

function slider(ul) {
animate({
delay: 17,
duration: 4000,
delta: function(p) {
return Math.max(0, -1 + 2 * p)
},
step: function(delta) {
ul.style.left = "-" + parseInt(currentImage * imageWidth + delta * imageWidth) + "px";
},
callback: function() {
currentImage++;
//Keep sliding if not last image
if (currentImage < imageNumber - 1) {
slider(ul);
}
// Slide back to first image, if last image
else {
leftPosition = (imageNumber - 1) * imageWidth;
//after set seconds, call goback for first image
setTimeout(function() {
goBack(leftPosition)
}, 3000);
setTimeout(function() {
slider(ul)
}, 5000);
}
}
});

function goBack(leftPosition) {
currentImage = 0;
id = setInterval(function() {
if (leftPosition >= 0) {
ul.style.left = '-' + parseInt(leftPosition) + "px";
leftPosition -= imageWidth / 10;
} else {
clearInterval(id);
}
}, 17);
}

function animate(opts) {
start = new Date;
id = setInterval(function() {
timePassed = new Date - start;
progress = timePassed / opts.duration
if (progress > 1) {
progress = 1;
}
delta = opts.delta(progress);
opts.step(delta);
if (progress == 1) {
clearInterval(id);
opts.callback();
}
}, opts.delay || 17);
}
}
slider(document.getElementById('Slider'));
}
window.onload = Slide;

#slidecontainer {
width: 100%;
height: 100%;
box-sizing: border-box;
}
#sliderwrap {
overflow: hidden;
height: 100%;
}
#left {
width: 10%;
height: 75px;
top: 50%;
left: 20px;
background-color: rgba(255, 255, 255, 0.5);
font-size: 4vmax;
position: absolute;
z-index: 1;
}
#left p,
#right p {
text-align: center;
line-height: 75px;
vertical-align: middle;
color: #ff69b4;
}
#right {
width: 10%;
height: 75px;
top: 50%;
right: 20px;
background-color: rgba(255, 255, 255, 0.5);
font-size: 4vmax;
position: absolute;
z-index: 1;
}
#slide {
position: relative;
height: 100%;
z-index: 0;
}
#slide ul li {
max-width: 100%;
float: left;
list-style-type: none;
}
#slide li img {
width: 100%;
height: 100%;
}

<div id="slidecontainer">
<div id="sliderwrap">
<div id="left">
<p>
< </p>
</div>
<ul id="slide">
<li>
<img src="images/style.jpg" alt="1" id="one" />
</li>
<li>
<img src="images/style1.jpg" alt="2" id="two" />
</li>
<li>
<img src="images/style2.jpg" alt="3" id="three" />
</li>
<li>
<img src="images/style3.jpg" alt="4" id="four" />
</li>
</ul>
<div id="right">
<p>></p>
</div>
</div>
</div>





Please do not answer with jQuery, as I do not know jQuery yet. Vanilla only please.

Edit have updated, the code as suggested answer, Yet still produces the same error on the same line.

Answer
window.onload = Slide();

You are calling Slide immediately (i.e. before the document has loaded and the element exists) and assigning its return value as the load event handler.

Remove the ().


If you fix that, you get a similar but new error at a different point because you call:

slider(document.getElementById('Slider'));

… and there is no element with that ID (since they are case-sensitive).