Reputation: 515
In my page I have an array of string and in my script I have a function that excludes the strings that contain certain char.
I control it through 3 check boxes.
I have the functions to do this but my problem is when I check two check boxes one to exclude the strings containing 'a' and one containing 'e'. I get the result of the last checked check box.
How to make a function that will handle all the check boxes and show me the final result.
This is what I have so far :
My html :
<div id="demo"> </div>
<div class="item">
<form id="aForm" onchange="filter()">
<input type="checkbox" id ="A" value="A">Exclude words with 'A'<br>
<input type="checkbox" id ="E" value="E">Exclude words with 'E'<br>
<input type="checkbox" id ="O" value="O">Exclude words with 'O'<br>
<form id="aForm" >
</div>
<script type="text/javascript">
var animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"]
function filter () {
if(document.getElementById('A').checked) {
var result2 = [];
for (var animal in Animals) {
if (Animals[animal].indexOf('a') == -1) {
result2 += " " + Animals[animal];
}
document.getElementById("demo").innerHTML = result2;
}
}
if(document.getElementById('E').checked) {
var result2 = [];
for (var animal in Animals) {
if (Animals[animal].indexOf('e') == -1) {
result2 += " " + Animals[animal];
}
document.getElementById("demo").innerHTML = result2;
}
}
if(document.getElementById('O').checked) {
var result2 = [];
for (var animal in Animals) {
if (Animals[animal].indexOf('o') == -1) {
result2 += " " + Animals[animal];
}
document.getElementById("demo").innerHTML = result2;
}
}
}
Upvotes: 0
Views: 838
Reputation: 876
Below logic code should work fine
var Animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"]
function filter ()
{
var result2 = [];
document.getElementById("demo").innerHTML = "";
for (var animal in Animals)
{
//Copy the value to a temp variable which you can manipulate
thisAnimal = Animals[animal];
//Check if each check-box is checked and if so, does the value in variable contains the stop-character
//If it has, blank out the temp variable
if (document.getElementById('A').checked && thisAnimal.indexOf('a') == -1)
thisAnimal = "";
if (document.getElementById('E').checked && thisAnimal.indexOf('e') == -1)
thisAnimal = "";
if (document.getElementById('O').checked && thisAnimal.indexOf('o') == -1)
thisAnimal = "";
//If the temp variable is not blank, due to one of the above conditions, then append it to the final result
if(thisAnimal.length > 0)
result2 += " " + thisAnimal;
document.getElementById("demo").innerHTML = result2;
}
}
// Call the function to display the result for the initial run
filter ();
<div id="demo"> </div>
<div class="item">
<form id="aForm" onchange="filter()">
<input type="checkbox" id ="A" value="A">Exclude words with 'A'<br>
<input type="checkbox" id ="E" value="E">Exclude words with 'E'<br>
<input type="checkbox" id ="O" value="O">Exclude words with 'O'<br>
</form>
</div>
Upvotes: 1
Reputation: 388436
Because whatever changes was done by the previous checks are overridden by the last if
block if it is checked
var animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"];
function filter() {
var a = document.getElementById('A').checked,
e = document.getElementById('E').checked,
o = document.getElementById('O').checked,
result2; //make a copy
result2 = animals.filter(function(value) {
value = value.toLowerCase();
return (!a || value.indexOf('a') == -1) && (!e || value.indexOf('e') == -1) && (!o || value.indexOf('o') == -1);
})
document.getElementById("demo").innerHTML = result2;
}
filter();
<div id="demo"> </div>
<div class="item">
<form id="aForm" onchange="filter()">
<input type="checkbox" id ="A" value="A"/>Exclude words with 'A'<br/>
<input type="checkbox" id ="E" value="E"/>Exclude words with 'E'<br/>
<input type="checkbox" id ="O" value="O"/>Exclude words with 'O'<br/>
</form>
</div>
Upvotes: 1