JavaScript: change HTML attributes

Question

I'm using Javascript to change HTML attributes,in my case I have 2 photos of the same light bulb that is switched on/off and I'm using 2 buttons in order to "switch on" and "switch off" the light bulb,but now I want to displace these 2 buttons into 2 images of the same switch that is on in the first pic and the second pic that the switch is off,how to do it?

<!DOCTYPE html>
<html>
<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 onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

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

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

enter image description here

Possible duplicate of How to add/update an attribute to an HTML element using JavaScript? — Peter G
– Peter G, Commented Feb 25, 2017 at 23:34

Patryk Cieszkowski · Accepted Answer · 2017-02-26 01:13:46Z

1

Kemal above demonstrated you way to solve your problem above, although you said it didn't work. Well, here's prove it actually has to be working.

<img id="myImage" src="http://placehold.it/150/000/fff" style="width:100px">

<button onclick='document.getElementById("myImage").setAttribute("src", "http://placehold.it/150/E8117F/000")'>PINK</button>
<button onclick='document.getElementById("myImage").setAttribute("src", "http://placehold.it/150/000/fff")'>BLACK</button>

answered Feb 26, 2017 at 1:13

Patryk Cieszkowski

7516 silver badges23 bronze badges

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

Comments

Kemal Yalcinkaya · Accepted Answer · 2017-02-25 23:32:11Z

0

Try changing these

document.getElementById('myImage').src='pic_bulbon.gif'

into those

document.getElementById('myImage').setAttribute("src", "pic_bulbon.gif");

More info: https://www.w3schools.com/jsref/met_element_setattribute.asp

answered Feb 25, 2017 at 23:32

Kemal Yalcinkaya

1,9682 gold badges15 silver badges26 bronze badges

1 Comment

Patryk Cieszkowski Over a year ago

@Kujtim Hajdini it has to be working. Use setAttribute function. jsfiddle.net/rd9d2a2q/1

alichur · Accepted Answer · 2017-02-26 00:59:17Z

0

If I understand your question you want the 'turn on' button to be an image of an on switch, and the turn off button to be an image of an off switch.

You could add a background-image property to each button.

<button style="background:url('lightSwitchOn.gif'); background-size: 100px 100px;">Turn on the light</button>

<button style="background:url('lightSwitchOff.gif'); background-size: 100px 100px;">Turn off the light</button>

You would need more css to resize the button to the size of the image. Taking the css out of the html and into a css file will help keep things organised.

A second option would be to display the light bulbs as images and handle their 'onClick' event.

edited Feb 26, 2017 at 0:59

answered Feb 26, 2017 at 0:53

alichur

9739 silver badges20 bronze badges

Collectives™ on Stack Overflow

JavaScript: change HTML attributes

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related