Создание кнопок, отображающих кнопки

Я пытаюсь сделать онлайн-анкету, которая покажет только следующий вопрос после ответа на текущий вопрос. Я очень новичок в этом и стараюсь учиться, когда иду. Как сделать второй набор кнопок только при ответе «да» на вопрос 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;, чтобы скрыть второй вопрос, а затем, когда пользователь нажимает на кнопку да, вы измените его на 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 id="question2" style="visibility: hidden"> 
    <button onclick="onClick(2)">Yes</button> 
    <button onclick="onClick(2)">no</button> 
</div>

использование Javascript программно скрыть или отобразить следующий DIV:

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

источник

2016-08-03 02:10:50 Usir

Как и другие, я бы сказал: Если вы хотите получить результаты в конце всех вопросов. (если пользователь уйдет, вы ничего не получите.)

Решение состоит в том, чтобы поместить каждый вопрос в скрытые divs на той же странице, отображая их после каждой проверки. Таким образом вам не нужно будет размещать и удалять контент. Пример:

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

Создание кнопок, отображающих кнопки

ответ

Смежные вопросы