如何隐藏/显示 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)?如何隐藏/显示 html 表单字段（如果用户说是，则显示一个输出，如果他们说不，则显示不同的输出）？
【发布时间】：2020-03-09 23:45:16
【问题描述】：

我已经开始开发一个 Web 应用程序，在该应用程序中我会根据用户所说的时间显示某些输出。如果他们单击“否”按钮，我希望用户看到一个 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;

    });
}

如何为一个表单上的多个按钮编写隐藏/显示功能？

谢谢！

【问题讨论】：

标签： javascript html forms web-development-server

【解决方案1】：

如果我理解正确，您需要切换问题取决于单击的按钮。这是我基于您的代码的解决方案：

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

【讨论】：

非常感谢您的快速回复！我尝试了代码，我想知道 - 有没有办法让 DIV 显示在按钮下方？
是的，当然。只需将 HTML 更改为 <button id="yes">Yes</button> <div id="Question1">Question1</div> <button id="no">No</button> <div id="Question2">Question2</div>

【解决方案2】：

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

【讨论】：