I`ve made a 2 buttons that run 2 functions to change the source of an image to a diffrent one. This works fine but whenever I change the source the image shifts slightly to the left and goes back to normal after changing source with the 2nd button back to the 1st image.
HTML
<body>
<div class="lightbulb">
<img id="lightbulb" src="mini_mini_pngwing.com.png">
</div>
<div class="button">
<button id="button" type="button" onclick="bulbon()">Turn On</button>
<button id="button2" type="button" onclick="bulboff()">Turn Off</button>
</div>
</body>
Javascript
function bulbon() {
if (document.getElementById("lightbulb").src = "mini_mini_pngwing.com.png") {
(document.getElementById("lightbulb").src = "mini_lightbulbon.png");
}
}
function bulboff() {
if (document.getElementById("lightbulb").src = "mini_lightbulbon.png") {
(document.getElementById("lightbulb").src = "mini_mini_pngwing.com.png");
}
}
CSS
.lightbulb { position: fixed;
height: 10%;
width: 50%;
display: block;
margin: auto;
left: 650px;
top:125px;}
I tried to make a simple website with 2 buttons. One of them changes a lightbulb to be on, and another the lightbulb to be off. However for some reason the lightbulbs position changes whenever the 1st button is pressed and goes back to normal once the 2nd is pressed.