I am trying to change the style display visibility and boolean value(which is a global variable) onclick. Nothing changes with the code I have Written Am I missing anything?
JavaScript
x
27
27
1
let emojiViewState = false;
2
3
4
const changeView = () => {
5
const iconView = document.querySelector(".iconView");
6
const emojiView = document.querySelector(".emojiView");
7
if (emojiViewState===false) {
8
emojiView.style.display = "none";
9
iconView.style.display = "block";
10
emojiViewState = true
11
12
} else if (emojiViewState===true) {
13
iconView.style.display = "none";
14
emojiView.style.display = "block";
15
emojiViewState = false
16
17
18
}
19
};
20
window.addEventListener("DOMContentLoaded", (event) => {
21
const changeViewButton = document.getElementById("changeViewButton");
22
changeViewButton.addEventListener("click", (event) => {
23
emojiViewState = true
24
25
})
26
}
27
CSS
JavaScript
1
8
1
.iconView {
2
display: none;
3
}
4
5
.emojiView {
6
display: block;
7
}
8
Advertisement
Answer
You should call changeView
in the button event listener:
JavaScript
1
23
23
1
let emojiViewState = false;
2
3
const changeView = () => {
4
const iconView = document.querySelector(".iconView");
5
const emojiView = document.querySelector(".emojiView");
6
if (emojiViewState === false) {
7
emojiView.style.display = "none";
8
iconView.style.display = "block";
9
emojiViewState = true;
10
11
} else if (emojiViewState === true) {
12
iconView.style.display = "none";
13
emojiView.style.display = "block";
14
emojiViewState = false;
15
}
16
};
17
18
window.addEventListener("DOMContentLoaded", (event) => {
19
const changeViewButton = document.getElementById("changeViewButton");
20
changeViewButton.addEventListener("click", (event) => {
21
changeView(); // <--- change the view on click
22
})
23
})
JavaScript
1
7
1
.iconView {
2
display: none;
3
}
4
5
.emojiView {
6
display: block;
7
}
JavaScript
1
4
1
<div class="iconView">iconView</div>
2
<div class="emojiView">emojiView</div>
3
4
<button id="changeViewButton">changeView</button>