Problem with var i

So I came up with the code below. Probably a quicker way possible, but it works :grinning:
There is however a problem. When I press the corresponding [0] button it’s ok, the corresponding figures (i === 2 and further) are no longer active. But when I press the [1] button, the i === 11 figure is still active. It needs to be set to inactive and the figures under button [1] become active. How do I solve this problem?

var tl = element.id;
var buttons = ['Cmaj', 'Cdor', 'Cfry', 'Clyd', 'Cmix', 'Cmin', 'Clok','reset','Chma', 'Chmi', 'Cpmi', 'Cpma', 'Cmibl', 'Cmabl', 'Chung'];
var x = document.getElementsByClassName('audio1');

switch (tl) {

//maj


case buttons[0]:

document.getElementById('groepC').style.display = "block";

//cirkels


document.getElementById('C1').style.display = "block";
document.getElementById('C2').style.display = "block";
document.getElementById('C3').style.display = "block";
document.getElementById('C4').style.display = "block";
document.getElementById('C5').style.display = "block";
document.getElementById('C6').style.display = "block";
document.getElementById('C7').style.display = "block";
document.getElementById('C-3').style.display = "none";
document.getElementById('C-2').style.display = "none";
document.getElementById('C+4').style.display = "none";
document.getElementById('C-7').style.display = "none";
document.getElementById('C-6').style.display = "none";
document.getElementById('C-5').style.display = "none";

 
   var i;
    for (i = 0; i < x.length; i++) {
     if (i === 2) { continue; }
     if (i === 4) { continue; }
     if (i === 6) { continue; }
     if (i === 9) { continue; }
     if (i === 11) { continue; }
     
        x[i].style.display = "block";
    }
    




break;

//dorisch
case buttons[1]:

document.getElementById('groepC').style.display = "block";

document.getElementById('C1').style.display = "block";
document.getElementById('C2').style.display = "block";
document.getElementById('C3').style.display = "none";
document.getElementById('C4').style.display = "block";
document.getElementById('C5').style.display = "block";
document.getElementById('C6').style.display = "block";
document.getElementById('C7').style.display = "block";
document.getElementById('C-3').style.display = "block";
document.getElementById('C-2').style.display = "none";
document.getElementById('C+4').style.display = "none";
document.getElementById('C-7').style.display = "none";
document.getElementById('C-6').style.display = "none";
document.getElementById('C-5').style.display = "none";




 var i;
    for (i = 0; i < x.length; i++) {
    if (i === 0) { continue; }
    if (i === 2) { continue; }
    if (i === 4) { continue; }
    if (i === 6) { continue; }
    if (i === 9) { continue; }
    if (i === 12) { continue; }
     
        x[i].style.display = "block";
    }


break;

I’d probably need to see the code in context for the IDs and naming of elements, but what sticks out to me is that you are conditionalizing setting the display to block in some cases, but you’re not resetting everything else, which is probably what you want to do.

The easiest technique is probably to loop over everything and set to some default state at the top, before anything has been conditionalized. Then your code can look at the conditions and set to a desired state. But you could also do specific sets instead of the continues.

1 Like

I indeed didn’t think of a reset. Solved it this way:

var a;

for (a = 0; a < maa.length; a++) {
    maa[a].style.display = "none";
    }
    
var ai;

for (ai = 0; ai < maa.length; ai++) {
 if (ai === 2) { continue; }
 if (ai === 4) { continue; }
 if (ai === 6) { continue; }
 if (ai === 9) { continue; }
 if (ai === 11) { continue; }
 
   maa[ai].style.display = "block";

Now it works. Thank you for your reply.

1 Like