CODEWITHSUNDEEP
htmlbutton
User123456789
User123456789

Reputation: 11

Display image onclick with a button

Using html, Create a webpage with the following properties: Create two buttons- turnon and turnoff. Use on.png and off.png such that

a) If a user clicks on the turnon button, the webpage should display on.png (picture of a lightbulb on).

b) If a user clicks on the turnoff button, the webpage should display off.png (picture of a lightbulb off)

<!DOCTYPE html>
<html>
<head> 
    <title>Lightbulb</title>  
</head>

<body>

    <div style="text-align: center">

        <input type="button" value="turnon"
               onclick= showimage(img src="on.png") >

        <input type="button" value="turnoff"
               onclick= showimage(img src="off.png")>


    </div>

</body>
</html>

Upvotes: 0

Views: 1696

Answers (2)

Sami
Sami

Reputation: 8419

Live Working Example

Actually you need to read, using javascript functions

Javascript functions => https://www.w3schools.com/js/js_functions.asp Set image source => https://www.w3schools.com/jsref/prop_img_src.asp

Here is a helping link, you could find on google https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

Upvotes: 1

MistaPrime
MistaPrime

Reputation: 1677

function showImage() {
  document.getElementById('loadingImage').style.display = 'block';
}

function hideImage() {
  document.getElementById('loadingImage').style.display = 'none';
}
<input type="button" value="TURN ON" onclick="showImage();" />
<input type="button" value="TURN OFF" onclick="hideImage();" />
<img id="loadingImage" src="https://i.sstatic.net/WQB7V.jpg?s=48&g=1" style="display:none" />

Upvotes: 1

Related Questions