Question

我对Javascript不满意，而且我试图根据是 - 否答案构建一个两个问题的测验。当我查看控制台时，如果我执行console.log（answer1 + answer3），我会看到yes-no值。但警报不起作用。如果我删除.checked并且等于true / false，则第一个警报会起作用。

任何帮助将不胜感激

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>

Answer 1

使用checked == true或仅checked并删除.value

answer1 = document.getElementById('q1');
 answer2 = document.getElementById('q2');
 answer3 = document.getElementById('q3');
 answer4 = document.getElementById('q4');

function checkanswear(event){
event.preventDefault()
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 onclick="checkanswear(event)" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
 </form>

Answer 2

问题是，您的复选框的.value是字符串"yes"或"no"。字符串不具有checked属性。

解决方案：只需删除.value部分即可。让answer1，answer2等作为输入元素本身。然后，您可以对它们使用.checked。

示例：

＆＃13;

document.getElementById('myBtn').onclick = function() {
    var answer1 = document.getElementById('q1');
    var answer2 = document.getElementById('q2');
    var answer3 = document.getElementById('q3');
    var answer4 = document.getElementById('q4');


    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!');
    }
};

＆＃13;

<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>

＆＃13;

带有无线电元素的if / else条件问题

2 个答案: