创建显示按钮的按钮

问题描述：

我正在尝试制作在线调查问卷，回答当前问题后仅显示下一个问题。我对此非常感兴趣，并努力学习。只有在对问题1回答“是”时，我如何才能使第二组按钮出现？创建显示按钮的按钮

<html> 
 
Question 1 
 
<p> 
 

 
<button onclick="myFunction1()">Yes</button> 
 
<script> 
 
function myFunction1() { 
 
    document.getElementById("demo").innerHTML = "Yes on question 1, display question 2";document.getElementById("demo").style.color = "black";} 
 

 
</script> 
 

 
<button onclick="myFunction2()">No</button> 
 

 

 

 

 

 
<script> 
 
function myFunction2() { document.getElementById("demo").innerHTML ="No on question 1 negative answer to question 1 display negative response";document.getElementById("demo").style.color = "red";} 
 
</script> 
 
</html> 
 
<p id="demo"></p> 
 

 

 
</script> 
 

 
</p></p></p> 
 

 
</html> 
 

 
<head> 
 
    <script> 
 
     function showImg() { 
 
      document.getElementById("map_img").style.display = ""; 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
    <button onclick="myFunction3()">Yes</button> 
 

 

 

 

 
<script> 
 
function myFunction3() { document.getElementById("demo2").innerHTML = "Yes to question 2";}</script> 
 
</html> 
 

 

 
<button onclick="myFunction4()">No</button> 
 
<script> 
 
function myFunction4() { 
 
    document.getElementById("demo2").innerHTML = "No to question 2";} 
 
</script> 
 

 

 
</body> 
 

 
<p id="demo2"></p>

答

在我看来，你必须把你的第二，第三和......问题到的div标签的风格=“显示：无”

当用户点击“是”按钮，您可以轻松更改显示屏来阻止并显示下一个问题。

另一件事是你的html格式不好。

这里是一个html的例子。

<html> 
    <head> 
    </head> 
    <body> 
    <div>Your first question</div> 
    <div style="display:none" id="question2">Your second question</div> 

    <script> 
     You can put all your functions here 
    </script> 
    </body> 
</html>

我做了一个很简单的例子给你，你可以查看以下链接：

https://jsfiddle.net/L7gp4c5g/

希望能帮到你！

这看起来非常适合我需要的东西。非常感谢 –

非常欢迎您！ –

请参阅@ doua-beri答案。他使用了令人惊叹的JavaScript语法。 –

答

使用CSS display: none;隐藏第二个问题，那么当用户点击Yes按钮，将其更改为display:block; 下面是一个例子：https://jsfiddle.net/mrpbtbgy/2/

document.querySelector("#q1Btn").addEventListener("click",()=>{ 
    document.querySelector("#question2").style.display="block"; 
});

答

把要在隐藏什么DIV隐藏：

<div id="question2" style="visibility: hidden"> 
    <button onclick="onClick(2)">Yes</button> 
    <button onclick="onClick(2)">no</button> 
</div>

使用JavaScript编程隐藏或显示下一格：

<script> 
    function onClick(button) { 
     document.getElementById('question' + (button + 1)).style.visibility = "visible" 
    } 
</script>

答

正如其他我会说：如果你想在所有问题的结尾得到结果。（如果用户离开，你将不会得到任何东西。）

解决方法是将每个问题放在隐藏的div中，在同一页面上，在每次验证后显示它们。这样你就不需要放置和删除内容。例如：

function showquestion(number){ 
 
$("#question"+number).removeClass("hidden"); // Show the next question 
 
$("#question"+(number-1)).addClass("hidden"); // Hide the current question 
 
}

.hidden{display:none; 
 
visibility : hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="question1" class=""> Mauvaise réponse</div> 
 
<div id="question1" class=""> Question 1 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(2)">No</button></div> 
 
<div id="question2" class="hidden"> Question 2 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(3)">no</button></div> 
 
<div id="question3" class="hidden"> Question 3 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(4)">no</button></div>

但我们忘记了“是/否”的一部分，也不是说说里面的源代码问题解决的知名度。

这样做的正确方法是对每个问题进行验证的ajax调用：用户将响应发送到php脚本，此脚本验证响应或不发送，然后发送将插入用户的内容页。这是用户不必作弊的唯一方式，它允许您在每一步中保存自己的回复（如果您保存了某些内容）。

创建显示按钮的按钮

相关推荐