Question

我正在尝试自学如何根据我的选择创建一个游戏我得到另一个页面的链接（但不发送表单 - 我试图让它显示在同一页面上）。在这种情况下，我有三个问题，如果任何问题都标记为是，我想要做的就是显示链接1。现在，如果我选择是，是，否，链接2显示出来。

此外，有没有办法将值发送到函数但是只有在最后一次选择后才触发div？像我想的那样工作点击的提交按钮。如果我走这条路线，如何将单选按钮的值发送到函数？

window.onload = function() {
  document.getElementById('link1').style.display = 'none';
  document.getElementById('link2').style.display = 'none';
};
function showdiv(x)
{
    if (x==1){
    document.getElementById('link1').style.display='block';
    document.getElementById('link2').style.display='none';
    }
    else {
    document.getElementById('link1').style.display='none';
    document.getElementById('link2').style.display='block';
    }
    return;
}

<body>
<label>Do you need equipment?</label>
<input type="radio" onclick="showdiv(1)" name="q1">Yes
<input type="radio" onclick="showdiv(0)" name="q1">No

</br>
<label>Do you need food?</label>
<input type="radio" onclick="showdiv(1)" name="q2">Yes
<input type="radio" onclick="showdiv(0)" name="q2">No

</br>
<label>Do you need help?</label>
<input type="radio" onclick="showdiv(1)" name="q3">Yes
<input type="radio" onclick="showdiv(0)" name="q3">No
</br>

<div id="link1">
Show Link 1
</div>
<div id="link2">
Show Link 2
</div>

</body>

Answer 1

出现问题的原因是每次单击答案时都会触发该功能。选择＆＃34;否＆＃34;在问题3中，变量x等于0，因此该函数执行它的工作并隐藏链接1并显示链接2.

如果您想使用按钮提交答案，您的代码将如下所示：

＆＃13;

window.onload = function() {
  document.getElementById('link1').style.display = 'none';
  document.getElementById('link2').style.display = 'none';
};
var x, y, z;
function a1(answer1){
x = answer1;
console.log(x);
};
function a2(answer2){
y = answer2;
console.log(y);
};
function a3(answer3){
z = answer3;
console.log(z);
};
function showdiv()
{
    if (x==1 | y==1 | z==1){
    console.log("One of the questions is 1");
    document.getElementById('link1').style.display='block';
    document.getElementById('link2').style.display='none';
    }
    else {
    console.log("None of the questions is 1");
    document.getElementById('link1').style.display='none';
    document.getElementById('link2').style.display='block';
    }
    return;
}

＆＃13;

<body>
<label>Do you need equipment?</label>
<input type="radio" onclick="a1(1)" name="q1">Yes
<input type="radio" onclick="a1(0)" name="q1">No

</br>
<label>Do you need food?</label>
<input type="radio" onclick="a2(1)" name="q2">Yes
<input type="radio" onclick="a2(0)" name="q2">No

</br>
<label>Do you need help?</label>
<input type="radio" onclick="a3(1)" name="q3">Yes
<input type="radio" onclick="a3(0)" name="q3">No
</br>
<button onclick="showdiv()">Submit</button>

<div id="link1">
Show Link 1
</div>
<div id="link2">
Show Link 2
</div>

</body>

＆＃13;

希望这很有用。

如何使用javascript优先考虑多个问题的无线电选择？

1 个答案: