DOM1 Javascript not working

Question

I probably did this the wrong way, I learned Jquery first and easy stuff. Taking a course in javascript learning DOM0 & DOM1 and just cannot get this to work.

<!DOCTYPE html>

<html lang="en">

<head>
<script type="text/javascript">
     function addBorder(){
          for var i=0; i<document.getElementsByTagName('img').length; i++) {
               document.getElementsByTagName('img')[i].style.border="3px solid red");
          }
     }
</script>
<script type="text/javascript">
     window.onload=addBorder;
</script>
</head>

<body>
<img src="image1.jpg" />
<img src="image2.jpg" />

</body>

</html>

Quickly typed, ignore typos if there are any. Results in no errors and no activity.

Tried it all different ways, DOM0 document.images..., window.onload=function(){....

Always nothing. Get the basic idea that images are loading after script, if placed in body it works fine. But why would it not work within window.onload=??

So thanks to all, found it. – HandsomeRob Mar 23 '13 at 04:28 — HandsomeRob, Mar 23 '13 at 04:28

score 1 · Accepted Answer · edited May 23 '17 at 12:28

You have a typo in your source code, as Ryan pointed out (you need a space between var and i).

Even though this is a beginner class you might want to get into good habits right from the start. Generally, looking at the DOM should be done as rarely as possible. Your function goes to the DOM every time you invoke document.getElementsByTagName('img'). Since it's in a for loop, that might be a lot. Granted, in your example there are only two img tags, but think about applying this script to a real page.

It's usually a good idea to touch the DOM once and cache the result in a variable, like so:

function addBorder() {
      var images = document.getElementsByTagName('img');
      for (var i=0; i < images.length; i++) {
           images[i].style.border = "3px solid red";
      }
}

This way you only hit the DOM once, then use the variable images (which is scoped to your function).

Also, you can (should) put those both in the same script tag in your HTML document (since they're inline scripts). And since you're only calling one function, and you're calling it on window.onload, you can simplify it and wrap it in an immediately invoked function expression (further reading), like so:

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">

    (function () {
          var images = document.getElementsByTagName('img');
          for (var i=0; i < images.length; i++) {
               images[i].style.border = "3px solid red";
          }
    })();

</script>
</head>

<body>
  <img src="image1.jpg" />
  <img src="image2.jpg" />
</body>

</html>

Thanks, I fixed the typo but it's not in the actual source. Still not working. New code here: http://bungle.ca/LabFour/ Complete, not working. I don't understand why. — HandsomeRob, Mar 23 '13 at 04:18
Also Something you can do to test JavaScript really quickly is open the Developer Console (Firebug in Firefox, Dev Tools in Chrome). You can type JavaScript straight into the console and have it evaluated *immediately* without actually editing/saving/reloading the page. — msanford, Mar 23 '13 at 04:25

score 0 · Answer 2 · answered Mar 23 '13 at 04:03

0

I saw the red border on the images as soon as I properly fixed the syntax of the code:

 function addBorder() {
      for (var i=0; i < document.getElementsByTagName('img').length; i++) {
           document.getElementsByTagName('img')[i].style.border = "3px solid red";
      }
 }

answered Mar 23 '13 at 04:03

Ryan O'Neill

3,727
22
27

Can you be specifc? I copy & pasted and still nothing. Page here:http://bungle.ca/LabFour/ – HandsomeRob Mar 23 '13 at 04:09

DOM1 Javascript not working

2 Answers2