Web Analytics Made Easy - StatCounter getElementsByTagName not returning values (very simple) - CodingForum

Announcement

Collapse
No announcement yet.

getElementsByTagName not returning values (very simple)

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    getElementsByTagName not returning values (very simple)

    Hi,
    I'm new, and this should be very simple:
    My getElementsByTagName ("a"); is not returning anything. I'm asking it to find the number of links on my simple html page. (the reason I'm even doing this is just because I'm trying to learn javascript) but the console in Firefox and the Alert window are just returning "0" when it should tell me I have "4" right?

    this is my scripts.js file
    Code:
    var linksAmount = document.getElementsByTagName("a");

alert("Amount of Links:",linksAmount.length);
console.log("Amount of Links:",linksAmount.length);
    this is my html file
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="scripts.js"></script>
</head>

<body>
<div id= "container">
<h1>Javascript page!</h1>
<a id="link1" href="http://www.google.com" title="googlelinke1">Google1</a>
<a id="link2" href="http://www.google.com" title="googlelinke2">Google2</a>
<a id="link3" href="http://www.google.com" title="googlelinke3">Google3</a>
<a id="link4" href="http://www.google.com" title="googlelinke4">Google4</a>

</div>

</body>
</html>
    should be simple right? the worst part is I'm following the example of a tutorial on Lynda.com, but his is working; mine not. (i have changed some names of links and such, but the important stuff is the same)

    thanks for any help.
    Tags: None
  • #2
    Welcome to the forum!

    You have to wait for the page to load before trying to get the anchor tags. If, for example, you wrapped that javascript code into a function and them put a button in the HTML with onclick running that function you will have a working script (after fixing your alert and console log lines - you can't use a comma like that).

    Try this, for example:

    script.js:
    Code:
    function get_links(){
	var linksAmount = document.getElementsByTagName("a");
	alert("Amount of Links:",linksAmount.length);
	console.log("Amount of Links:",linksAmount.length);
}
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id= "container">
  <h1>Javascript page!</h1>
  <a id="link1" href="http://www.google.com" title="googlelinke1">Google1</a>
  <a id="link2" href="http://www.google.com" title="googlelinke2">Google2</a>
  <a id="link3" href="http://www.google.com" title="googlelinke3">Google3</a>
  <a id="link4" href="http://www.google.com" title="googlelinke4">Google4</a>
  <br /><button onclick="get_links();">Get Links!</button>
</div>
</body>
</html>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:     validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
    • 👍 1

    Comment

    • #3
      thanks a ton! I knew there was something simple I was missing.

      Comment

      • #4
        Had a similar problem and this fixed it! I'm new to the onload stuff.
        • 👍 1

        Comment

        • #5
          Happy to have helped!
          The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
          See Mediocrity in its Infancy
          It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
          Seek and you shall find... basically:           validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

          Comment

          Previous template Next
          Working...
          X
          😀
          🥰
          🤢
          😎
          😡
          👍
          👎