I'm using switch visible to switch between 3 visible elements on button press, but am only able to get 2. Thanks for the help :)
function switchVisible() {
if (document.getElementById('text1')) {
if (document.getElementById('text1').style.display == 'none') {
document.getElementById('text1').style.display = 'block';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'block';
}
else {
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'block';
document.getElementById('text3').style.display = 'none';
}
}
}#text1, #text2, #text3 {
display: none;
}<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>to do this one proposal can be :
var divIds = [
'text1',
'text2',
'text3'
];
var visibleIndex = 0;
function switchVisible() {
divIds.forEach(id => {
document.getElementById(id).style.display = 'none';
});
document.getElementById(divIds[visibleIndex]).style.display = 'block';
visibleIndex++;
if (visibleIndex === divIds.length) {
visibleIndex = 0;
}
}
switchVisible();#text1, #text2, #text3 {
display: none;
}<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>You can use the below approach to achieve this. Use a switch statment and a count vairable to keep track of 3 divs.
Full working code snippet:
let count = 1;
function switchVisible() {
switch (count) {
case 1:
document.getElementById('text1').style.display = 'block';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'none';
count++;
break;
case 2:
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'block';
document.getElementById('text3').style.display = 'none';
count++
break;
case 3:
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'block';
count = 1
break;
default:
count = 1
}
}#text1,
#text2,
#text3 {
display: none;
}<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();" />Hope that's how you wanted it work.
A class would be better to mark all elements of a collection.
Sidenote: In my experience classes are almost always better, as they can be applied to a single or to multiple elements. IDs are imo. more for special cases. They address a single element which must be unique throughout the entire page.
Now back to topic:
About the toggling, you can either keep track of the visible element in a variable:
let visible = 0;
function switchVisible() {
const elements = Array.from(document.querySelectorAll(".tab"));
elements.forEach((element, index) => {
element.style.display = index === visible ? "block" : "none";
});
// increment visible
visible = (visible + 1) % elements.length;
}.tab {
display: none;
}<div class="tab">text 1</div>
<div class="tab">text 2</div>
<div class="tab">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();" />or you find out which one is visible in the function itself.
function switchVisible() {
const elements = Array.from(document.querySelectorAll(".tab"));
// checking which one is the first that has some dimension
let visible = elements.findIndex(element => element.offsetWidth || element.offsetHeight);
// increment visible
visible = (visible + 1) % elements.length;
// make this "next one" visible
elements.forEach((element, index) => {
element.style.display = index === visible ? "block" : "none";
});
}.tab {
display: none;
}<div class="tab">text 1</div>
<div class="tab">text 2</div>
<div class="tab">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible()" />