1

在用户回答所有 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>

http://jsfiddle.net/ekcKW/

4

1 回答 1

1

您的代码中有一些与IF..ELSE 语句相关的错误

if (q1==null || q2==null ||q3==null) 和 if ((q1=="AT&T" ) && ( q2=="8GB" ) && ( q3=="Black"))

应该 ：

if ((q1==null) || (q2==null) ||(q3==null))和 if ((q1=="AT&T" ) && ( q2=="8GB" ) && ( q3=="Black"))。

我添加了一个带有id='btn'anddisabled属性的按钮，因此无法单击它。

我们将此部分添加到您的 js 代码中以检查是否应启用按钮。单击后，按钮将显示您的 linkDiv（默认隐藏）。

   var button=document.getElementById('btn');
   button.removeAttribute('disabled');
   button.onclick=function() {
                 document.getElementById("linkDiv").setAttribute('style','display:block;');
                };

在这里演示：http: //jsfiddle.net/Ct8BF/

于 2013-08-25T02:58:46.810 回答