获取所选单选按钮的组合以在单击按钮时显示消息

Question

我有各种各样的单选按钮，并且取决于选择它们的组合，当用户对输入感到满意时，我希望在用户按下按钮时在span元素中显示一条消息。 但是，这没有实现。 到目前为止，这是我的代码：

HTML：

<p>Select your first colour:</p>
<input type="radio" id="red" name="primary" value="0">Red<br>
<input type="radio" id="yellow" name="primary" value="1">Yellow<br>
<input type="radio" id="blue" name="primary" value="2">Blue<br>

<p>Select your second colour:</p>
<input type="radio" id="green" name="other" value="0">Green<br>
<input type="radio" id="white" name="other" value="1">White<br>
<input type="radio" id="purple" name="other" value="2">Purple<br>

<input type="button" id="mixColours" value="Mix!"><br />
<span id="colourResult"> </span><br /><br />

使用Javascript：

var $ = function(id) {
return document.getElementById(id);
};

var red = $("red");
var yellow = $("yellow");
var blue = $("blue");
var green = $("green");
var white = $("white");
var purple = $("purple");

var mixColours = function mixColours () {

if (red.checked && green.checked) {
    $("colourResult").innerHTML = "You made Yellow!";
}
else if (red.checked && white.checked) {
    $("colourResult").innerHTML = "You made Pink!";
}
else if (red.checked && purple.checked) {
    $("colourResult").innerHTML = "You made Mauve!";
}

if (yellow.checked && green.checked) {
    $("colourResult").innerHTML = "You made Yellow!";
}
else if (yellow.checked && white.checked) {
    $("colourResult").innerHTML = "You made Light Yellow!";
}
window.onload = function () {
    $("mixColours").onclick = mixColours;

或这里的jsfiddle： http : //jsfiddle.net/e2yjerm3/

如果有人可以找出我的错误并帮助我（或帮助我撰写文章），我将非常感激。 我是根据教程等创建的。我已经阅读过，但似乎误入歧途。

Answer 1

演示-http: //jsfiddle.net/victor_007/e2yjerm3/3/

2 } }末尾丢失

 var $ = function(id) { return document.getElementById(id); }; var red = $("red"); var yellow = $("yellow"); var blue = $("blue"); var green = $("green"); var white = $("white"); var purple = $("purple"); var mixColours = function mixColours() { if (red.checked && green.checked) { $("colourResult").innerHTML = "You made Yellow!"; } else if (red.checked && white.checked) { $("colourResult").innerHTML = "You made Pink!"; } else if (red.checked && purple.checked) { $("colourResult").innerHTML = "You made Mauve!"; } if (yellow.checked && green.checked) { $("colourResult").innerHTML = "You made Yellow!"; } else if (yellow.checked && white.checked) { $("colourResult").innerHTML = "You made Light Yellow!"; } }; /* this */ window.onload = function() { $("mixColours").onclick = mixColours; }; /* this */ 

 <p>Select your first colour:</p> <input type="radio" id="red" name="primary" value="0">Red <br> <input type="radio" id="yellow" name="primary" value="1">Yellow <br> <input type="radio" id="blue" name="primary" value="2">Blue <br> <p>Select your second colour:</p> <input type="radio" id="green" name="other" value="0">Green <br> <input type="radio" id="white" name="other" value="1">White <br> <input type="radio" id="purple" name="other" value="2">Purple <br> <input type="button" onclick="mixColours()" id="mixColours" value="Mix!"> <br /> <span id="colourResult"> </span> <br /> <br />