javascript error setAttribute()

Question

I am new to javascript programming. When i try to run this code, the default image in html tags shows up. I used the setAttribute function but it doesn't work. Please Help!

<!DOCTYPE HTML>
<html>
<head>
    <title>Javascript</title>
    <script type="text/javascript">

        var foo = document.getElementById("image");
        foo.setAttribute("src", "glasses.jpg");

    </script>
</head>

<body>
    <img src="awesomesite.gif" id="image" alt="Awesomesite">

    <p id="intro">
        Hello World
    </p>

</body>
</html>

Your element doesn't exist yet. – SLaks Jun 03 '15 at 14:05 — SLaks, Jun 03 '15 at 14:05
Move the script tag to just before the body tag closes. – Miguel M. Jun 03 '15 at 14:05 — Miguel M., Jun 03 '15 at 14:05

score 1 · Answer 1 · answered Jun 03 '15 at 14:08

1

either move the script to the bottom of your page or add the following to your script

document.onload(function()
{
    var foo = document.getElementById("image");
    foo.setAttribute("src", "glasses.jpg");
});

answered Jun 03 '15 at 14:08

blairmeister

915
1
6
16

`document.onload(function(){});` is incorrect. – Sebastian Simon Nov 03 '22 at 04:08

score 1 · Answer 2 · answered Jun 03 '15 at 14:19

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <style>
  </style>
</head>
<body>
    <img src="https://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
    <p id="intro">
        Hello World
    </p>

  <script>

   window.onload = function () {

          var logo = document.getElementById('image');
          logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
    };


</script>    
</body>
</html>

javascript error setAttribute()

2 Answers2