Changing the Functionality of Button in JavaScript

Question

I am practicing JS on W3School, while trying out the "The Light Bulb" exercise I wanted to Change the functionality of the two buttons!

What i wanted to do was to add another button which on click will interchange the labels "Turn On the Light" and "Turn off the Light" along with the onclick actions.

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p><b><i>JavaScript can change HTML attributes.</i></b></p>

<p>In this case JavaScript changes the src (source) attribute of an image.</p>

<!-- Button1 (LHS) -->
<button id="buttonId1" onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

<!-- Image of the Bulb -->
<img id="myImage" src="pic_bulbon.gif" style="width:100px">

<!-- Button2 (RHS) -->
<button id="buttonId2" onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<!-- Function to interchange label of both buttons along with the onclick actions -->
<script>
function clickButton() {
    <!-- initially button1 is for switching off the button, changing it to turn-on state -->
    document.getElementById('buttonId1').innerHTML = 'Turn on the light';
    document.getElementById('buttonId1').onclick="document.getElementById('myImage').src='pic_bulbon.gif' " ; 

    <!-- initially button2 is for switching on the button, changing it to turn-off state -->
    document.getElementById('buttonId2').innerHTML = 'Turn off the Light';
    document.getElementById('buttonId2').onclick="document.getElementById('myImage').src='pic_bulboff.gif' " ; 
}
</script>


<br>
<!-- Adding new button  to manipulate button functionality -->
<button onclick="clickButton()" >Do Not Click Me</button>
</body>
</html>

I tried to execute above code, it replaces the label on clicking "Do Not Click Me" button but does not changes the onclick actions!

I need help in achieving that functionality.

Samu · Accepted Answer · 2016-09-15 12:48:31Z

Try this:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
function onBulb(){
   document.getElementById('myImage').src='pic_bulbon.gif';
}

function offBulb(){
   document.getElementById('myImage').src='pic_bulboff.gif';
}
function swapButtons(){
   document.getElementById('buttonId1').innerText="Turn off the light";
   document.getElementById('buttonId1').onclick=offBulb;
   document.getElementById('buttonId2').innerText="Turn on the light";
   document.getElementById('buttonId2').onclick=onBulb;
}
</script>

</head>
<body>

<h1>What Can JavaScript Do?</h1>

<p>JavaScript can change HTML attributes.</p>

<p>In this case JavaScript changes the src (source) attribute of an image.</p>


<button id="buttonId1" onclick="onBulb()">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button id="buttonId2" onclick="offBulb()">Turn off the light</button>

<button onclick="swapButtons()" >Swap Buttons</button>


</body>
</html>

Ravikiran kalal · Accepted Answer · 2016-09-15 12:38:06Z

1

use this instead. . .

document.getElementById('buttonId1').onclick = function() { 
    document.getElementById('myImage').src='pic_bulbon.gif';
};
document.getElementById('buttonId2').onclick= function() { 
    document.getElementById('myImage').src='pic_bulboff.gif'
};

answered Sep 15, 2016 at 12:38

Ravikiran kalal

1,0708 silver badges11 bronze badges

Comments

Jhonatas Kleinkauff · Accepted Answer · 2016-09-15 13:01:36Z

1

onclick must be setted to a function, not string..

function clickButton() {
    document.getElementById('buttonId1').innerHTML = 'Turn on the light';
    document.getElementById('buttonId1').onclick= function () {functionSwitch(true)}
    document.getElementById('buttonId2').innerHTML = 'Turn off the Light';
    document.getElementById('buttonId2').onclick= function() {functionSwitch(false)}
}

function functionSwitch(state) {
 
    if(state == false)
        document.getElementById('myImage').src='https://openclipart.org/image/2400px/svg_to_png/119749/power-off.png';
    else
        document.getElementById('myImage').src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png';
}

<body>

  <h1>What Can JavaScript Do?</h1>

  <p><b><i>JavaScript can change HTML attributes.</i></b>
  </p>

  <p>In this case JavaScript changes the src (source) attribute of an image.</p>

  <!-- Button1 (LHS) -->
  <button id="buttonId1" onclick='functionSwitch(false)'>Turn off the light</button>

  <!-- Image of the Bulb -->
  <img id="myImage" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" style="width:100px">

  <!-- Button2 (RHS) -->
  <button id="buttonId2" onclick='functionSwitch(true)'>Turn on the light</button>

  <br>
  <!-- Adding new button  to manipulate button functionality -->
  <button onclick="clickButton()">Do Not Click Me</button>
</body>

edited Sep 15, 2016 at 13:01

answered Sep 15, 2016 at 12:53

Jhonatas Kleinkauff

9667 silver badges18 bronze badges

1 Comment

Rishabh Prasad Over a year ago

But when we used Button Action then onclick was mapped with a string and that time it worked so why It doesn't work for document.getElementById('buttonId2').onclick ?

Collectives™ on Stack Overflow

Changing the Functionality of Button in JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related