I am making a function in javascript that is supposed to change the src of an html element to make it seem like the html element (a lightbulb) is turning on and off. It includes an if else if statement to check whether the bulb is already off or on and then turns it to the opposite. The function is set off by a button.
My problem is that when I click on the button it turns the bulb on, but when I click it again it turns off. Why is this happening? I am getting no error messages from the console.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: white;
border-radius: 0.25px;
border-color: black;
height: 30px;
}
</style>
</head>
<body>
<button id = "button" onclick="light(on)"></button>
<img id="myImage" src="file:///C://Users/xenia/Downloads/light-bulb-off-
pixilart.png">
<script>
var on = 0; // 1 is true, 0 is false
function light(on) {
if (on == 0) {
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-on-pixilart.png"
on = 1
}
else if (on == 1){
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-off-pixilart.png"
on = 0
}
}
</script>
</body>
</html>
I am making a function in javascript that is supposed to change the src of an html element to make it seem like the html element (a lightbulb) is turning on and off. It includes an if else if statement to check whether the bulb is already off or on and then turns it to the opposite. The function is set off by a button.
My problem is that when I click on the button it turns the bulb on, but when I click it again it turns off. Why is this happening? I am getting no error messages from the console.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: white;
border-radius: 0.25px;
border-color: black;
height: 30px;
}
</style>
</head>
<body>
<button id = "button" onclick="light(on)"></button>
<img id="myImage" src="file:///C://Users/xenia/Downloads/light-bulb-off-
pixilart.png">
<script>
var on = 0; // 1 is true, 0 is false
function light(on) {
if (on == 0) {
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-on-pixilart.png"
on = 1
}
else if (on == 1){
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-off-pixilart.png"
on = 0
}
}
</script>
</body>
</html>
- Hey Samuel, wele to SO! Have you got a Fiddle? It will make it a lot easier for us to help you. – Alicia Sykes Commented May 12, 2019 at 15:20
- I don't currently, but I will make one – AtomProgrammer Commented May 12, 2019 at 15:21
-
1
I think Nina found your problem, but there are a couple of things I would clean up in your code to make it clearer and more robust. Firstly use a boolean not int for on/ off e.g.
let lightOn = true;– Alicia Sykes Commented May 12, 2019 at 15:23 - I have created it - how do i publish it? – AtomProgrammer Commented May 12, 2019 at 15:29
- Great, thanks. Just hit Save, and it will amend a unique hash onto the URL, that you can then share here. You don't need to be logged in or anything. – Alicia Sykes Commented May 12, 2019 at 22:12
5 Answers
Reset to default 3You are using a global variable, but you hand over a value for a local variable inside of the function. Then changing of this variable does not affect the global value, because primitve values are handed over by value.
You need to change this line into (without on)
<button id = "button" onclick="light()"></button>
and the function signature, without a variable
function light() {
Now you access the global variable on and change the value.
Just another hint, you could take a boolean value (true or false) and omit the check in the if statement by using the variable directly and omit the second check, because you have only two values.
Maybe you could omit the second check with a number value, because you have no code which assigns a different value than 0 or 1.
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: white;
border-radius: 0.25px;
border-color: black;
height: 30px;
}
</style>
</head>
<body>
<button id = "button" onclick="light();"></button>
<img id="myImage" src="file:///C://Users/xenia/Downloads/light-bulb-off-
pixilart.png">
<script>
var on = 0; // 1 is true, 0 is false
function light() {
if (on == 0) {
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-on-pixilart.png"; //You forgot a ; here
on = 1; //You forgot a ; here
}
else if (on == 1){document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/light-bulb-off-pixilart.png"; //You forgot a ; here
on = 0; //You forgot a ; here
}
}
</script>
</body>
</html>
- Remember to use ;. This is why your script stops!
- You can write it simpler like this: light()
Global variables are not changed by change in the values of local variables inside a function. Checkout scope rules in the documentation of the language to understand it. When you turn it on the value is changed but that function to turn it off won't work because you are not changing the global variable.
This question has already been answered, but some pseudocode that demonstrates and clarifies the problem is:
bool globalVar = false
func changeState(bool localVar) {
localVar = !localVar
}
Where
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
Would output
false
false
false
And what you want:
bool globalVar = false
func changeState() {
globalVar = !globalVar
}
Where
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
Would output
true
false
true
//using localSorrage
localStorage.setItem("on",1)
lampButton.addEventListener("click",()=>{
function light(on) {
if (localStorage.getItem("on") == 0) {
lamp.style.display="none";//heddin
localStorage.setItem("on",1)
} else if (on == 1) {
lamp.style.display="block";//Visible
localStorage.setItem("on",0)
}
}
light(localStorage.getItem("on"));
});