I was hoping to find the best way to display a new dropdown for every checkbox that is checked. Every time a user checks that they took a certain medication, a dropdown with question should appear (so if they select four medications, four questions with dropdowns should appear). Right now, I have it working so that one hidden question and dropdown appear when a checkbox is checked. What would be the best way to achieve my desired results?
let hiddenMed = document.querySelector('.questionMed');
let hiddenMedQ = document.querySelector(".hiddenQ");
let initialH2 = hiddenMedQ.innerHTML;
//whenever i call the function, whatever is in the parenthesis is going to be known as element within the function
function selectMeds(element) {
//when you set the variable to element, it enables you to onclick on the thises instead of when you getElementbyId and it only finds the first one
let checkBox = element;
// let checkBox = document.getElementById("medType");
// let text = document.getElementById("text");
if (checkBox.checked == true) {
hiddenMed.classList.remove("hidden");
let medName = checkBox.value;
hiddenMedQ.innerHTML = initialH2 + medName + "?";
} else {
let hiddenMed = document.querySelector('.questionMed');
hiddenMed.classList.add("hidden");
hiddenMedQ.innerHTML = initialH2;
}
}
<div class="container question">
<h2>What kind of medication were you given?</h2>
<div class="row col-sm-6 medRow1">
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Tylenol">Tylenol</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Celebrex">Celebrex</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Oxycodone">Oxycodone</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Oxycotin">Oxycotin</label>
</div>
</div>
<div class="row col-sm-6 medRow2">
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Dilaudid">Dilaudid</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Tramadol">Tramadol</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Aspirin">Aspirin</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="medType" onclick="selectMeds(this)" value="Warfarin/Coumadin">Warfarin/Coumadin</label>
</div>
</div>
</div>
<!--hidden-->
<div class="container question questionMed hidden">
<h2 class="hiddenQ">Did you need a refill of </h2>
<select class="form-control" id="medAmount">
<option>Select an Option</option>
<option>Yes</option>
<option>No</option>
</select>
</div>
<!--hidden-->
Aucun commentaire:
Enregistrer un commentaire