CODEWITHSUNDEEP
javascripthtml
haakl
haakl

Reputation: 25

Javascript: parameter set to null even though value is given

I have a problem regarding my smooth scroll function, when I try to call it in my HTML with a parameter, the parameter "doesn't register" and my parameter variable gets null.

function yPosition() {
    if (self.pageYOffset) return self.pageYOffset;
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}

function elementYPosition(eID) {
    var element = document.getElementById(eID);
    var y = element.offsetTop;
    var node = element;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}

function scroll(eID) {
    var startY = yPosition();
    var stopY = elementYPosition (eID);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY);
        return;
    }
    var speed = Math.round( distance / 100 );
    if (speed >= 20) speed = 20;
    var step = Math.round( distance / 25 );
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i = startY; i < stopY; i += step) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY -= step;
            if (leapY > stopY) {
                leapY = stopY;
                timer++;
            }
        }
        return;
    }
    for ( var i = startY; i > stopY; i-= step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step;
        if ( leapY < stopY) {
            leapY = stopY;
            timer++;
        }
    }
}

relevant html:

<div id="scroll">
            <a href="#problemScroll" onclick="scroll('abc'); return false"><img src="graphics/down_arrow.png" alt="down arrow" /></a>
</div>

console when ran:

Uncaught TypeError: Cannot read property 'offsetTop' of
null elementYPosition js.js:12

@ js.js:12scroll 
@ js.js:22onclick 
@ index.html:17

Upvotes: 0

Views: 77

Answers (2)

jfriend00
jfriend00

Reputation: 707278

This line of code:

var element = document.getElementById(eID);

is apparently returning null such that when you then try to do:

var y = element.offsetTop;

You are trying to read the .offsetTop property on null which throws an exception.

That can happen for two main reasons:

  1. If there is no element in your document with the id that matches what is in the eID argument

  2. If you are calling it before that part of the page has finished loading and thus the element with that ID doesn't exist yet.

It appears that you are calling scroll() directly from your HTML with this:

onclick="scroll('abc'); return false"

So, it must be the 'abc' ID value that is missing from your document.

FYI, you can verify this is the case by inserting a console.log() into your code like this:

function elementYPosition(eID) {
    var element = document.getElementById(eID);

    // insert this to check the element variable
    console.log(element);

    var y = element.offsetTop;
    var node = element;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}

Presumably the fix for this is to make sure the element with the 'abc' ID value exists in your document.

Upvotes: 1

Jonathan Lam
Jonathan Lam

Reputation: 17351

This is probably because there is no element with id "abc": this would be the reason for nullelement. Make sure you have one (there isn't one in the code you provided).

Other than that, the code should be valid.

Upvotes: 1

Related Questions