Javascript function doesn't run with an if-else statement

Question

I have a few checkboxes:

<input type="checkbox" name="filterby" id="type" value="type" onchange="showFilter();" />Type<br>
<input type="checkbox" name="filterby" id="conseq" value="conseq" onchange="showFilter();" />Consequence<br>
<input type="checkbox" name="filterby" id="group" value="group" onchange="showFilter();" />Group<br>
<input type="checkbox" name="filterby" id="sample" value="sample" onchange="showFilter();" />Sample<br>

and a div for each one, that I want to show and hide when clicked. This is my function:

function showFilter() {
  var filterby = ["type", "conseq", "group", "sample"];

  for (var i = 0; i < filterby.length; i++) {
    var option_on = document.getElementById(filterby[i]).checked;
    var filterby_list = filterby[i] + "_list";

    if (option_on == true) {
      document.getElementById(filterby_list).style.display = "block";
    }
    else {
      document.getElementById(filterby_list).style.display = "none";
    }
  }
}

I have been looking at it for hours and can't figure out why it doesn't work. If I delete the if-else statement, it runs through, if not, it works for the first checkbox and not the others, it stops when looping over the second. Where is my error?

Thank you.

What happens if you step through in a debugger? My guess is that the if statement is crashing and that stops the script. — Raymond Chen
– Raymond Chen, Commented Jul 28, 2022 at 15:22
There should be an error in the console, pointing out which element is missing — Bergi
– Bergi, Commented Jul 28, 2022 at 15:24

Shilly · Accepted Answer · 2022-07-28 15:22:54Z

4

If I add divs with the correct ID's your script expects, your code works. So your problem is not with the code shown. Does your HTML contain the correct id values on the divs you want to show and hide?

function showFilter() {
  var filterby = ["type", "conseq", "group", "sample"];

  for (var i = 0; i < filterby.length; i++) {
    var option_on = document.getElementById(filterby[i]).checked;
    var filterby_list = filterby[i] + "_list";

    if (option_on == true) {
      document.getElementById(filterby_list).style.display = "block";
    }
    else {
      document.getElementById(filterby_list).style.display = "none";
    }
  }
}

<input type="checkbox" name="filterby" id="type" value="type" onchange="showFilter();" />Type<br>
<input type="checkbox" name="filterby" id="conseq" value="conseq" onchange="showFilter();" />Consequence<br>
<input type="checkbox" name="filterby" id="group" value="group" onchange="showFilter();" />Group<br>
<input type="checkbox" name="filterby" id="sample" value="sample" onchange="showFilter();" />Sample<br>

<div id="type_list">type</div>
<div id="conseq_list">conseq</div>
<div id="group_list">group</div>
<div id="sample_list">sample</div>

answered Jul 28, 2022 at 15:22

Shilly

8,5991 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Poláček Over a year ago

Thanks, I'm just stupid. My first div had a <select> tag that wasn't finished by </select>. I realized as I was re-running your code.

Sachin Padha · Accepted Answer · 2022-07-28 15:39:15Z

0

You can achieve things either in ways:

either Create the list with name appended with "_list"
OR second option remove "_list" from the javascript like below code:

function showFilter() { var filterby = ["type", "conseq", "group", "sample"];

for (var i = 0; i < filterby.length; i++) { var option_on = document.getElementById(filterby[i]).checked; var filterby_list = filterby[i];
```
 if (option_on == true) {
   document.getElementById(filterby_list).style.display = "block";
 }
 else {
   document.getElementById(filterby_list).style.display = "none";
 }
```
} }

answered Jul 28, 2022 at 15:39

Sachin Padha

2211 silver badge4 bronze badges

Collectives™ on Stack Overflow

Javascript function doesn't run with an if-else statement

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related