Multiple if .. else statement on one function on javascript Only the first statement is executed the other are ignored So what should I do to fix this thank u this is the code:
<!DOCTYPE html>
<html>
<style>
.hidden {
display: none
}
</style>
<body> <span class="Q2P hidden" id="Q2P">Indoor</span> <span class="Q2Q hidden" id="Q2Q">Indoor Grommets</span>
<h6>Size</h6>
<div class="stylized-select-container">
<select id="selectSize" class="select stylized-select" onchange="myFunction()">
<option value="size1" selected="selected">1size1- Horizontal</option>
<option value="size2">size2- Vertical</option>
</select>
</div>
<h6 class="text-size-6">Material</h6>
<div class="stylized-select-container">
<select class="stylized-select" id="selectmaterial" onchange="myFunction()">
<option id="indoor" value="indoor" selected="selected">Indoor</option>
<option id="outdoor" value="outdoor">Outdoor</option>
</select>
</div> <br/> <input type="checkbox" class="stylized-checkbox" id="grommets" onclick="myFunction()" /> <label class="stylized-checkbox-visual" for="grommets">Add grommets</label>
<script>
var Q2P = document.getElementById("Q2P");
var Q2Q = document.getElementById("Q2Q");
function myFunction() {
var grommets = document.getElementById("grommets").checked;
var mat = document.getElementById("selectmaterial").value;
var size = document.getElementById("selectSize").value;
if (size == "size1" && mat == "indoor" && grommets == !true) {
Q2P.style.display = "inline"
} else {
Q2P.style.display = "none"
}
if (size == "size1" && mat == "indoor" && grommets == true) {
Q2Q.style.display = "inline"
} else {
Q2Q.style.display = "none"
}
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire