dimanche 8 avril 2018

issue with if/else conditions with radio elements

I'm not good with Javascript and I'm trying to build a two-question quiz based on yes-no answers. When I look at the console I see the yes-no values if I do console.log(answer1 + answer3); But the alert doesn't work. If I remove .checked and do equal to true/false the first alert works.

Any help would be appreciated

var answer1 = document.getElementById('q1').value;
var answer2 = document.getElementById('q2').value;
var answer3 = document.getElementById('q3').value;
var answer4 = document.getElementById('q4').value;


if (answer1.checked && answer3.checked) {
alert('walking park');

}
else if (answer1.checked && answer4.checked) {
alert('no walk in park');
}
else if (answer2.checked && answer4.checked ) {
alert('oh noooo!');
}
else if (answer2.checked && answer3.checked) {
alert('cor blimey gov!');
}


<form>
   <p>Question 1</p>
   <fieldset>
   <label for="Question1">Can your dog eat food?</label>
   <input type="radio" id="q1" name="question1" value="yes"> Yes<br>
   <input type="radio" id="q2" name="question1" value="no"> No
   </fieldset>

   <p>Question 2</p>
   <fieldset>
   <label for="Question2">Can your dog run in the park</label>
   <input type="radio" id="q3" name="question2" value="yes"> Yes<br>
   <input type="radio" id="q4" name="question2" value="no"> No
   </fieldset>
   <button type="button" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
 </form>

Aucun commentaire:

Enregistrer un commentaire