时间戳

首页 > 解决方案 > 如何隐藏/显示 html 表单字段（如果用户说是，则显示一个输出，如果他们说不，则显示不同的输出）？

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

问题描述

我已经开始开发一个 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;

    });
}

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

谢谢！

标签： javascripthtmlformsweb-development-server

解决方案

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

推荐阅读