Question

HTML：

<ul>
    <li>
        <h5>Does the PURPLE card have your number?</h5>
        <input type="radio" name="card1" value="A">yes<br>
        <input type="radio" name="card1" value="B">no<br>
    </li>
    <li>
        <h5>Does the GREEN card have your number?</h5>
        <input type="radio" name="card2" value="A">yes<br>
        <input type="radio" name="card2" value="B">no<br>
    </li>
    <li>
        <h5>Does the BLUE card have your number?</h5>
        <input type="radio" name="card3" value="A">yes<br>
        <input type="radio" name="card3" value="B">no<br>
    </li>
    <li>
        <h5>Does the PINK card have your number?</h5>
        <input type="radio" name="card4" value="A">yes<br>
        <input type="radio" name="card4" value="B">no<br>
    </li>
    <li>
        <h5>Does the RED card have your number?</h5>
        <input type="radio" name="card5" value="A">yes<br>
        <input type="radio" name="card5" value="B">no<br>
    </li>
    <li>
        <h5>Does the ORANGE card have your number?</h5>
        <input type="radio" name="card6" value="A">yes<br>
        <input type="radio" name="card6" value="B">no<br>
    </li>     
</ul>

<button onclick="returnScore()">View Results</button>

使用JavaScript，我试图根据哪些单选按钮是，哪些是否，返回不同的结果。例如，yes no no no no no将返回答案1. yes yes no no no no将返回答案2等，以获得36个可能的回报。

此问题来自此处的纸牌游戏：http://www.counton.org/explorer/mathsmagic/realmystery/

Answer 1

单击按钮时会调用一个简单函数，它会使用JavaScript选择所有元素并提醒两个值。

我添加了一个表单标记，其中包含列表中的所有元素，以便我可以选择内部输入：

<script>
function showValues() {
    var inputs = document.getElementById("form").elements;
    var countYes = 0;
    var countNo = 0;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'radio' && inputs[i].checked)
            if(inputs[i].value == "A") {
            countYes++;
            } else if(inputs[i].value == "B") {
            countNo++;
          }
    }
    alert("Number of Yes': " + countYes);
    alert("Number of No's: " + countNo);
}
</script>


<body>
<form id="form">
<ul>
    <li>
        <h5>Does the PURPLE card have your number?</h5>
        <input type="radio" name="card1" value="A">yes<br>
        <input type="radio" name="card1" value="B">no<br>
    </li>
    <li>
        <h5>Does the GREEN card have your number?</h5>
        <input type="radio" name="card2" value="A">yes<br>
        <input type="radio" name="card2" value="B">no<br>
    </li>
    <li>
        <h5>Does the BLUE card have your number?</h5>
        <input type="radio" name="card3" value="A">yes<br>
        <input type="radio" name="card3" value="B">no<br>
    </li>
    <li>
        <h5>Does the PINK card have your number?</h5>
        <input type="radio" name="card4" value="A">yes<br>
        <input type="radio" name="card4" value="B">no<br>
    </li>
    <li>
        <h5>Does the RED card have your number?</h5>
        <input type="radio" name="card5" value="A">yes<br>
        <input type="radio" name="card5" value="B">no<br>
    </li>
    <li>
        <h5>Does the ORANGE card have your number?</h5>
        <input type="radio" name="card6" value="A">yes<br>
        <input type="radio" name="card6" value="B">no<br>
    </li>     
</ul>
</form>
<input type="button" onclick="showValues();" value="click" />

根据选择的单选按钮返回不同的答案

1 个答案: