javascript onclick function not working?

Question

I am trying to do an onclick event where when a light bulb image is clicked it goes from a light bulb off to a light bulb on image and vice versa. I am using an external javascript file. when I click on the image nothing happens.

I cant figure out whats wrong,

my html portion:

<head>
    <link rel="stylesheet" href="css/program-01.css" />
    <script type="text/javascript" src="javascript/program-01.js"></script>
    <title>
        <h1>Program-01</h1>
    </title>
</head>

<body>
    <div id="LightOff">
        <img src="images/light_off.png" id="light_off" alt="" onclick="LightBulbFunction()" />
    </div>
</body>

my js file function:

function LightBulb() {
    var image_change = document.getElementById("light_off");

    if (image_change.src == "images/light_off.png") {
        image_change = "images/light_on.png";
    } else {
        image_change = "images/light_off.png";
    }
}

does onclick work outside of a <form>?

chicks
– chicks

2015-08-31 03:46:43 +00:00
Commented Aug 31, 2015 at 3:46 — chicks
– chicks, Commented Aug 31, 2015 at 3:46

Tushar · Accepted Answer · 2015-09-02 04:19:16Z

2

Suggestions/Problems:

You function names are different.

You're using the function LightBulbFunction on the onclick event. But, you don't have the function of that name in your script. You'll get

ReferenceError: LightBulbFunction() is not defined.

To change the image src attribute value, use image_change.src inside the event handler.

To solve the problem change the name of onclick attribute value to LightBulb.

function LightBulb() {
  var image_change = document.getElementById("light_off");

  if (image_change.src == "images/light_off.png") {
    image_change.src = "images/light_on.png";
    //          ^^^^
  } else {
    image_change.src = "images/light_off.png";
    //          ^^^^
  }
}

<div id="LightOff">
  <img src="images/light_off.png" id="light_off" alt="" onclick="LightBulb()" />
  <!--                                                           ^^^^^^^^^^^ -->
</div>

Better approach will be to use addEventListener to bind events on the elements.

document.getElementById('light_off').addEventListener('click', function() {
  var image_change = document.getElementById("light_off");

  if (image_change.src == "images/light_off.png") {
    image_change.src = "images/light_on.png";
  } else {
    image_change.src = "images/light_off.png";
  }
}, false);

<div id="LightOff">
  <img src="images/light_off.png" id="light_off" alt="" onclick="LightBulb()" />
  <!--                                                           ^^^^^^^^^^^ -->
</div>

edited Sep 2, 2015 at 4:19

answered Aug 31, 2015 at 3:41

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kronis72 Over a year ago

even after making the changes you showed, its still not working for me. I didnt try the addEventListener, just made the .src and function name changes. My js file is external so Im wondering if somehow i have messed up something else as well. I checked the file location of js file and images and every thing seems right. Is there something else i could be doing wrong?

Tushar Over a year ago

@kronis72 Looking at your code, only above two problems can be seen, did you change the function name. Any error on console?

kronis72 Over a year ago

im running on my machine as a localhost, so I had to at some more information to the img src on the js file....127.0.0.1:8020/itse1311/program-01 when I add that it seems to work but when i upload it to the server, it does not work, not does images/light_off.png

kronis72 Over a year ago

but when i upload it to the server, it does not work, nor does images/light_off.png..... the folder my index.html is saved theres a folder called images and inside that, is the actual image. I dont understand why its not working with just that img src file location

Tushar Over a year ago

@kronis72 Make sure the path of the images is correct, images are having right permissions, check browser console for errors

sam · Accepted Answer · 2015-08-31 03:42:43Z

0

Well in your html, the code is onclick="LightBulbFunction()" while in javascript it is LightBulb. Change either of them and make them match

answered Aug 31, 2015 at 3:42

sam

2,0232 gold badges12 silver badges13 bronze badges

Comments

StackSlave · Accepted Answer · 2015-08-31 03:46:40Z

0

You are not redefining the .src. Change

image_change =

to

image_change.src =

And your function needs to have the same LightBulb function name.

answered Aug 31, 2015 at 3:46

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

javascript onclick function not working?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related