Как скрыть / показать html полей формы (показывая один вывод, если пользователь говорит «да», и другой, если он говорит «нет»)? - PullRequest
Новая
       4

Как скрыть / показать html полей формы (показывая один вывод, если пользователь говорит «да», и другой, если он говорит «нет»)?

0 голосов
/ 10 марта 2020

Я начал работать над веб-приложением, в котором я показываю определенные результаты в зависимости от того, когда пользователь говорит. Если они нажимают кнопку «нет», я хочу, чтобы пользователь видел один DIV, но если он выбрал «да», то должен отображаться другой DIV. Я написал следующий код: 

<style>
    #Question1 {
        width: 80%;
        padding: 15px 0;
        text-align: center;
        background-color: red;
        margin-top: 15px;
    }
</style>
<script>
<button id="no" onclick="myFunction()">No</button>
window.onload = function myFunction() {
    document.getElementById("Question1").style.visibility = "hidden";
    document.getElementById("no").addEventListener("click", function myFunction() {
        var currentstate = document.getElementById("Question1").style.visibility;
        var newstate = currentstate == "visible" ? "hidden" : "visible"
        document.getElementById("Question1").style.visibility = newstate;

    });
}

После тестирования этого кода я попытался сделать то же самое для "да". Однако я обнаружил, что когда я это сделал, «нет» перестало работать. 

   <style>
#Question1 {
    width: 80%;
    padding: 15px 0;
    text-align: center;
    background-color: red;
    margin-top: 15px;
}
</style>
<style>
#Question2 {
 width: 80%;
 padding: 15px 0;
 text-align: center;
 background-color: blue;
 margin-top: 15px;
               }
</style>

<button id="yes" onclick="myFunction2()">Yes</button>

<button id="no" onclick="myFunction()">No</button>
<script>
window.onload = function myFunction() {
    document.getElementById("Question1").style.visibility = "hidden";
    document.getElementById("no").addEventListener("click", function myFunction() {
        var currentstate = document.getElementById("Question1").style.visibility;
        var newstate = currentstate == "visible" ? "hidden" : "visible"
        document.getElementById("Question1").style.visibility = newstate;

    });
}


window.onload = function myFunction2() {
    document.getElementById("Question2").style.visibility = "hidden";
    document.getElementById("yes").addEventListener("click", function myFunction2() {
        var currentstate = document.getElementById("Question2").style.visibility;
        var newstate = currentstate == "visible" ? "hidden" : "visible"
        document.getElementById("Question2").style.visibility = newstate;

    });
}

Как мне запрограммировать скрытие / отображение функций для нескольких кнопок на одной форме?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Если я правильно понимаю, вам нужно переключать вопросы, зависит от нажатой кнопки. Вот мое решение на основе вашего кода:

https://jsfiddle.net/75n60vtk/

<div id="Question1">Question1</div>
<div id="Question2">Question2</div>
<br>
<button id="yes">Yes</button>
<button id="no">No</button>

#Question1 {
  display: none;
  width: 80%;
  padding: 15px 0;
  text-align: center;
  background-color: red;
  margin-top: 15px;
}

#Question2 {
  display: none;
  width: 80%;
  padding: 15px 0;
  text-align: center;
  background-color: blue;
  margin-top: 15px;
}

document.getElementById("no").addEventListener("click", function() {
    document.getElementById("Question1").style.display = "none";
    document.getElementById("Question2").style.display = "block";
})

document.getElementById("yes").addEventListener("click", function() {
    document.getElementById("Question1").style.display = "block";
    document.getElementById("Question2").style.display = "none";
})
0 голосов
/ 10 марта 2020

Вы переопределяете первую функцию window.onload на вторую, и эти функции там не нужно определять. Вы можете сделать просто: 

<button id="yes" style="visibility: hidden" onclick="myFunction2()">Yes</button>
<button id="no"  style="visibility: hidden" onclick="myFunction()">No</button>

<script>
function myFunction() {
    var currentstate = document.getElementById("Question1").style.visibility;
    var newstate = currentstate == "visible" ? "hidden" : "visible"
    document.getElementById("Question1").style.visibility = newstate;
});

function myFunction2() {
    var currentstate = document.getElementById("Question2").style.visibility;
    var newstate = currentstate == "visible" ? "hidden" : "visible"
    document.getElementById("Question2").style.visibility = newstate;

});

function init() {
    document.getElementById("no").addEventListener("click", myFunction)
    document.getElementById("yes").addEventListener("click", myFunction2)
}

window.onLoad = init

</script>
...