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

【问题标题】：Getting the combination of selected radio buttons to show message on button click获取选定单选按钮的组合以在按钮单击时显示消息
【发布时间】：2015-01-08 19:32:28
【问题描述】：

我有各种单选按钮，根据选择它们的组合，我希望在用户对输入感到满意时按下按钮时在 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/

如果有人能找出我的错误并帮助我（或引导我帮助文章），我将不胜感激。我根据教程等创建了这个。我读过，但我似乎误入歧途。

【问题讨论】：

标签： javascript html css button radio-button

【解决方案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 />

【讨论】：