Question

我正在尝试制作一个在线问卷，只会在回答当前问题后显示下一个问题。我很陌生，并且在我去的时候努力学习。如果对问题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>

Answer 1

使用css display: none;隐藏第二个问题，然后当用户点击“是”按钮时，您将其更改为display:block; 以下是一个示例：https://jsfiddle.net/mrpbtbgy/2/

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

Answer 2

在我看来，你必须将你的第二，第三和......问题放入div的标签中，风格=＆＃34;显示：无＆＃34;

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

另一件事是你的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/

希望能帮到你！

Answer 3

将您要隐藏的内容隐藏在隐藏的div中：

regex

使用javascript以编程方式隐藏或显示下一个div：

try
            {
                SqlConnection con = new SqlConnection(ConnectionString);
                con.Open();
                    var key = RandomString(6);
                    SqlCommand insertCommand = new SqlCommand("INSERT INTO tableName(d1, d2, d3) VALUES (@0, @1, @2)", con);

                    insertCommand.Parameters.Add(new SqlParameter("0", key));
                    insertCommand.Parameters.Add(new SqlParameter("1", "values"));
                    insertCommand.Parameters.Add(new SqlParameter("2", DateTime.Now));
                   var rowCount = insertCommand.ExecuteNonQuery();


                con.Close();
                if (rowCount < 1)
                {
                    label.Text = "OMG it is Fail :(";
                    return false;
                }
                else
                {
                    label.Text = "HEY ~~~ inserted";
                    return true;
                }


            }
            catch (Exception ex)
            {
                label.Text = ex.Message;
                return false;
            }

Answer 4

正如其他人所说：如果您想在所有问题结束时获得结果。（如果用户离开，你什么都不会得到。）

解决方案是将每个问题放在隐藏的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脚本，此脚本是否验证响应，然后发送将插入用户页面的内容。这是用户不作弊的唯一方法，它允许您在每一步保存他的响应（如果您保存了一些东西）。

创建显示按钮的按钮

4 个答案: