Javascript Not Detecting HTML Elements

Question

Okay, believe me that I have many "p" tags on my HTML document. Here is my Javascript code:

var elements = document.getElementsByTagName('p');
var i;
window.onload = clicker();
function clicker() {
    alert(elements.length);
    for(i=0;i<elements.length;i++) {
        alert('looping');
        elements[i].onClick = function() {
            this.style.color = '#33CC33';
        }
    }
    setInterval(clicker, 0);
}

Notice my first alert statement in there. It alerts "0" to me, which makes no sense. My problem is that none of the "p" tags are being stored in the elements variable at all, therefore making my for loop not run. The HTML is filled with a lot of PHP but here is the top snipped to prove to you that I do have a "p" tag:

<!DOCTYPE html>
    <head>
        <title>Gwiddle - FTP</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css' />
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div id='banner'><p>Gwiddle FTP</p></div>

Answer 1

You are trying to access your DOM before it has loaded.

Try putting this: var elements = document.getElementsByTagName('p'); inside your clicker() function:

var elements;
var i;
window.onload = clicker();
function clicker() {
    elements = document.getElementsByTagName('p');
    alert(elements.length);
    for(i=0;i<elements.length;i++) {
        alert('looping');
        elements[i].onClick = function() {
            this.style.color = '#33CC33';
        }
    }
    setInterval(clicker, 0);
}

Javascript Not Detecting HTML Elements

Question

1 answers

solution1
2 2014-10-09 23:30:51

Javascript Not Detecting HTML Elements

Question

1 answers

solution1 2 2014-10-09 23:30:51

solution1
2 2014-10-09 23:30:51