創建顯示按鈕的按鈕

我正在嘗試製作在線調查問卷，回答當前問題後僅顯示下一個問題。我對此非常感興趣，並努力學習。只有在對問題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>

來源

2016-08-03 Casey Tuna Bloodworth

在我看來，你必須把你的第二，第三和......問題到的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/

希望能幫到你！

來源

2016-08-03 02:08:17

這看起來非常適合我需要的東西。非常感謝 –

非常歡迎您！ –

請參閱@ 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"; 
});

來源

2016-08-03 02:09:30

把要在隱藏什麼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>

來源

2016-08-03 02:10:50 Usir

正如其他我會說：如果你想在所有問題的結尾得到結果。（如果用戶離開，你將不會得到任何東西。）

解決方法是將每個問題放在隱藏的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腳本，此腳本驗證響應或不發送，然後發送將插入用戶的內容頁。這是用戶不必作弊的唯一方式，它允許您在每一步中保存自己的回覆（如果您保存了某些內容）。

來源

2016-08-03 02:26:19 technico

創建顯示按鈕的按鈕

回答

相關問題