Javascript onclick event declation with if-else

Question

I m newer to javascript, Now i am getting started to javascript.

Here is the link(run with example):

http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

Here, i have raised one doubt,

  if (image.src.match("bulbon")) {
//do stuff
}

May i know, what is "bulbon" why we have use?

And i tried another one example, Here is my code:

<img width="300px" height="300px" src="dim-bulb.jpg" id="bulb" onclick="changebulb()"  alt=bulb"/>
<script>
function changebulb() {

var image=document.getElementById("bulb");
if(image.src.match("bulbon")) {
image.src="dim-bulb.jpg";
}
else {
image.src="bright.jpg";
}
}

When i run my code, it works partially , that is when i click, it will becomes bright, but again i click it didn't show as dim..

May i know what is my mistake?

Thanks in advance.

image.src.match: image - Image tag, src - src attribute, match - Check whether it matches with src attribute's value.. — The Coder
– The Coder, Commented Apr 11, 2015 at 11:22

Rahul Tripathi · Accepted Answer · 2015-04-11 11:23:30Z

2

In your if condition

if(image.src.match("bulbon"))

you are trying to match bulbon in your gif and both the gif does not have bulbon naming.

It should be like

if(image.src.match("bulbon"))
image.src="dim-bulb.jpg";
}
else {
image.src="bulbon.jpg"; }

or check the bright image correctly like this:

if(image.src.match("bright")) {
image.src="dim-bulb.jpg";
}
else {
image.src="bright.jpg";
}

answered Apr 11, 2015 at 11:23

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

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

4 Comments

pcs Over a year ago

Okay @Rahul Tripathi: so may i use bri or brigh instead of bright?

Rahul Tripathi Over a year ago

@saina:- You can refer developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… to check how match works :)

pcs Over a year ago

that link quite complex.. but i am a newer, so can you able to tell me short? thanks

Rahul Tripathi Over a year ago

@saina:- The match method searches a string for a match against a regular expression, and returns the matches. So in your case when you try to search bulbon then it will search it in the string and if it matches then it return the match. So in your case it is "bulbon.jpg"

Joshua Arvin Lat · Accepted Answer · 2015-04-11 11:23:31Z

1

bulbon = bulb on

The code below simply checks if the image being used is the bulb with the light on and replaces the image with off version.

var image = document.getElementById('myImage');

if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
} else {
    image.src = "pic_bulbon.gif";
}

To fix your code, change it to this:

function changebulb() {
    var image=document.getElementById("bulb");

    if(image.src.match("bright")) {
        image.src="dim-bulb.jpg";
    }
    else {
        image.src="bright.jpg";
    }
}

answered Apr 11, 2015 at 11:23

Joshua Arvin Lat

1,0399 silver badges8 bronze badges

Comments

Cinder · Accepted Answer · 2015-04-11 11:24:13Z

1

"bulbon" is part of the filename pic_bulbon.gif, but not pic_bulboff.gif so if(image.src.match("bulbon")) { is testing to see if the bulb is currently on.

The reason it onbly partially works is because you renamed the files - to get it working again, simply replace bulbon with bright:

<img width="300px" height="300px" src="dim-bulb.jpg" id="bulb" onclick="changebulb()"  alt=bulb"/>
<script>
function changebulb() {
   var image=document.getElementById("bulb");
   if(image.src.match("bright")) {
      image.src="dim-bulb.jpg";
   }
   else {
      image.src="bright.jpg";
   }
}

answered Apr 11, 2015 at 11:24

Cinder

1,6192 gold badges14 silver badges23 bronze badges

Comments

Ram Patra · Accepted Answer · 2015-04-11 11:30:58Z

1

bulbon is the image name found in the src of the image tag when you see the bright light.

So when it is clicked you check the src and change the src to some other image let's say bulboff.

Your code should be like:

function changebulb() {
    // get the element with id 'bulb'
    var image=document.getElementById("bulb");
    // check the src attribute of the image tag
    if(image.src.match("dim-bulb")) {
        image.src="bright.jpg"; // change the src attribute
    } else {
        image.src="dim-bulb.jpg"; // change the src attribute
    }
}

edited Apr 11, 2015 at 11:30

answered Apr 11, 2015 at 11:24

Ram Patra

16.7k13 gold badges71 silver badges87 bronze badges

Comments

Undefined · Accepted Answer · 2015-04-11 11:26:29Z

0

Try this:

var image=document.getElementById("bulb");
if(image.src.match("dim-bulb")) {
image.src="bright.jpg";
}
else {
image.src="dim-bulb.jpg";
}

answered Apr 11, 2015 at 11:26

Undefined

312 bronze badges

Comments

Phengly Eung · Accepted Answer · 2015-04-11 11:29:54Z

0

<img width="300px" height="300px" src="dim-bulb.jpg" id="bulb"  onclick="changebulb()"  alt=bulb"/>
<script>
function changebulb() {

var image=document.getElementById("bulb");
if(image.src.match("dim-bulb.jpg")) {
 image.src="bright.jpg";
}
else {
 image.src="dim-bulb.jpg";
}
}
</script>

I think this may be answer to your question.

answered Apr 11, 2015 at 11:29

Phengly Eung

1

Collectives™ on Stack Overflow

Javascript onclick event declation with if-else

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related