我如何 hide/show html 表单字段（如果用户说是，则显示一个输出，如果他们说不是，则显示不同的输出）？

Question

我已经开始开发一个 Web 应用程序，在该应用程序中，我会根据用户的指示显示某些输出。如果他们单击 "no" 按钮，我希望用户看到一个 DIV，但如果他们 select 是，则应显示另一个 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;

    });
}

测试此代码后，我尝试对 "yes" 执行相同的操作。但是，我发现当我这样做时，"no" 停止工作。

   <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;

    });
}

如何为一个表单上的多个按钮编写 hide/show 功能？

谢谢！

Answer 1

您正在用第二个函数覆盖第一个 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>

Answer 2

如果我没看错的话，您需要根据点击的按钮来切换问题。这是我基于您的代码的解决方案：

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";
})

我如何 hide/show html 表单字段（如果用户说是，则显示一个输出，如果他们说不是，则显示不同的输出）？

How do I hide/show html form fields (showing one output if the user says yes, and a different one if they say no)?

javascript

html

forms

web-development-server