0

I copied exact javascript code from a class I am taking online but the code is not working properly for me. I continue to get the "cannot read property 'length' of undefined" error when try to run it. Can anyone tell me why I continue to get this error and how I can fix it.

//the JavaScript logic on this page simply adds the "visible" CSS class to the next image in the rotation appoximately every 3.5 seconds

var slideInterval = 3500;

//retrieves all of the "figure" elements within the "section" element using the "id" of 'carousel'. Returns the resulting array as the result of this function 
function getFigures() {
    return 
 document.getElementById('carousel').getElementsByTagName('figure');
}

//This function iterates over the figure elements in the section element. It removes the visible class from the current figure element, then adds the class to the next figure element. Once complete, it uses the setTimeout function to invoke itself again after a specified amount of time (3500 milliseconds = 3.5 seconds)
function moveForward() {
    var pointer;
    var figures = getFigures();
    for (var i = 0; i < figures.length; i++) {
        if (figures[i].className == 'visible') {
            figures[i].className = '';
            pointer = i;
        }
    }
    if (++pointer == figures.length) {
        pointer = 0;
    }
    figures[pointer].className = 'visible';
    setTimeout(moveForward, slideInterval);
}

//In the startPlayback function, use the setTimeout function in JavaScript to invoke the moveForward method after a specified amount of time. Use the slideInterval variable for the time interval
function startPlayback() {
    setTimeout(moveForward, slideInterval);
}

//invokes "startPlayback" from above
startPlayback();
fullyloaded314
  • 1
  • 5
    Remove the line break between `return` and `document.getElementById...`. JS essentially treats those as two separate statements when you put in the line break. So it should be just `return document.getElementById('carousel').getElementsByTagName('figure');`. – Mike Cluck Jun 27 '16 at 21:14
  • Can you also share the html code. – faheem farhan Jun 27 '16 at 21:16
  • 1
    [ASI](http://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) is not your friend. Closing as a typo. – ssube Jun 27 '16 at 21:18
  • 1
    @faheemfarhan Why? It isn't relevant to the question. – Mike Cluck Jun 27 '16 at 21:18
  • @MikeC man I can't believe that affected it, I guess thats why I'm a neebie. Thanks a lot though man, appreciate the help – fullyloaded314 Jun 27 '16 at 21:22
  • @fullyloaded314 No worries. It's a problem with JS and trips people up all the time. – Mike Cluck Jun 27 '16 at 21:24
  • "Newbie?" Have no apologies, my good friend. *"The digital computer doth quite-regularly make fools of us all!"* – Mike Robinson Jun 27 '16 at 21:50

1 Answers1

0

Change getFigures function to this:

function getFigures() {
    var myObj = document.getElementById('carousel').getElementsByTagName('figure');
    return myObj;
}

javascript can not return DOM elements when you select them level by level.

One matter: in moveForward function: give a default value for 'pointer'

var pointer = 0;

because maybe figure tags hadn't visible class and your code was stopped

peyman azizi
  • 43
  • 7