我有各种各样的单选按钮,并且取决于选择它们的组合,当用户对输入感到满意时,如果用户按下按钮,我希望在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/
如果有人可以找出我的错误并帮助我(或帮助我撰写帮助文章),我将非常感激。我是根据教程等创建的。我已经阅读过,但似乎误入歧途。
最佳答案
演示-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 />
关于javascript - 获取所选单选按钮的组合以在单击按钮时显示消息,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26878655/