Question

尝试在点击时更改容器的可见性。可见性已设定隐藏在CSS中，表单在div中。任何帮助赞赏。我也有尝试使用 display 属性并将其设置为 none 或 compact 而不是 visibility ，但仍然没有更改。< / p>

的JavaScript：

<script type="text/javascript">
function displayCont()
    {
    var idName= this.value;
    var getElmt= document.getElementById("idName").style.visibility;
    if (getElmt == hidden) 
        {
        getElmt = visible;
            }
    else if (getElmt == visible)
        {
        getElmt = hidden;
        }
    }
</script>

HTML摘录

<form id="btns">
    <input type="button" value="Timer" id="timerBtn" onclick="displayCont()"/>
    <input type="button" value="Countdown" id="ctDownBtn" onclick="displayCont()"/>
</form>

Answer 1

你有一些错误。首先，idName未定义。此外，当您使用getELementById（'idName'）时，请删除引号以使用您刚刚定义的变量。此外，您需要围绕可见和隐藏的引号。我正在研究代码。

这应该更接近你正在寻找的东西。

<!DOCTYPE html>
<html>
    <head>
        <style>
          #myDiv{
            display: none;
          }
        </style>
    </head>
    <body>
    <form id="btns">
        <input type="button" value="Timer" id="timerBtn" onclick="displayCont('myDiv')"/>
        <div id="myDiv"> Show/Hide This </div>
    </form> 
    <script type="text/javascript">
        function displayCont(inp){
            var ele = document.getElementById(inp);
            var shown = ele.style.display;
            if (shown == 'none') {
                ele.style.display = 'block'
            }
            else {
                ele.style.display = 'none'
            }
        }
    </script>
    </body>
</html>

Answer 2

问题是getElmt只是一个字符串，而不是引用。

这是你想要的：

function toggle(id){
    if (document.getElementById(id).style.visibility == 'hidden') {
        document.getElementById(id).style.visibility = 'visible';
    }
    else {
        document.getElementById(id).style.visibility = 'hidden';
    }
}

然后您可以使用

切换元素

toggle('idName');

调用事件时函数不起作用

的JavaScript：

HTML摘录

2 个答案: