ユーザーが 3 つの質問すべてに回答するまでは明るい色でクリックできないボタンを作成するにはどうすればよいですか。このボタンは、既にコード内にあるリンクを生成し、目的のページに移動します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function tryToMakeLink()
{
//get all selected radios
var q1=document.querySelector('input[name="q1"]:checked');
var q2=document.querySelector('input[name="q2"]:checked');
var q3=document.querySelector('input[name="q3"]:checked');
//make sure the user has selected all 3
if (q1==null || q2==null ||q3==null)
{
document.getElementById("linkDiv").innerHTML="--";
}
else
{
//now we know we have 3 radios, so get their values
q1=q1.value;
q2=q2.value;
q3=q3.value;
//now check the values to display a different link for the desired
configuration
if (q1=="AT&T" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>att 8gb black</a>";
}
else if (q1=="Other" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>other 8b
white</a>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>another
option</a>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>oops</a>";
}
else if (q1=="AT&T" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>can't</a>";
}
else if (q1=="Other" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>yours</a>";
}
else if (q1=="Other" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>mines</a>";
}
else if (q1=="Other" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>what</a>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>red</a>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>orange</a>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>green</a>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>blue</a>";
}
}
}
</script>
<form name="quiz" id='quiz'>
What carrier do you have?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T"/>AT&T</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q1"
value="Other"/>Other</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q1"
value="Unlocked"/>Unlocked</li>
</ul>
What is your phones capicity?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q2" value="8GB"/>8GB</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q2" value="16GB"/>16GB</li>
</ul>
What color is your phone?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q3"
value="Black"/>Black</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q3"
value="White"/>White</li>
</ul>
<br>
<div id=linkDiv>
---
</div>
</form>
</body>
</html>