Question

我目前有两个按钮，每个按钮显示不同的形式。我也有按钮，当你点击它一次时，它会显示表格，如果你再次点击它，它将隐藏表格。

我想做什么： 我试图得到它，以便如果已经显示了一个表单并且我点击了OTHER表单的按钮，那么当前显示的那个将隐藏而另一个将显示。

这是我认为可行的，但是如果显示其中一个表单并且我点击另一个表单的按钮，则没有任何反应。

<script>
    function show(x, y){
        if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
            document.getElementById(x).style.display == "block";
            document.getElementById(y).style.display == "none";
        }
        else if(document.getElementById(x).style.display == "none") {
            document.getElementById(x).style.display = "block";
        }
        else{
            document.getElementById(x).style.display = "none";
        }
    }
</script>

<form>
    <button type = "button" onclick = 'show("searchForm", "insertForm");'>Perform Search</button>
    <button type = "button" onclick = 'show("insertForm", "searchForm");'>Insert Data</button>
</form>
    
<form id = "searchForm" value "search" style = "display: none;" action = "test2.php" method = "post">

    <!-- My code -->
  
</form>

<form id = "insertForm" style = "display: none;" action = "test2.php" method = "post">
  
    <!-- My code -->
      
</form>

我确定这是我犯的一些非常愚蠢的错误。任何人都可以帮我解决这个问题并解释我做错了什么以及我应该做些什么呢？谢谢！

Answer 1

您正在==进行比较if，需要使用作业=

if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
    document.getElementById(x).style.display = "block";
                                             ^
    document.getElementById(y).style.display = "none";
                                             ^
}

Answer 2

这是一个非常小的错误..

document.getElementById（x）.style.display = “block”; document.getElementById（y）.style.display = “none”;

您使用的是等号运算符而不是赋值运算符。

Answer 3

无论您想使用什么，请尝试尽可能少地触摸DOM。

function show(x, y){
    var x, y;   // function scope vars

    // search for elements just once
    x = document.getElementById(x);
    y = document.getElementById(y);

    console.log(x);
    console.log(y);   // just to show if you are getting elems you really want

        if(x.style.display == "none" && y.style.display != "none"){
            x.style.display = "block";
            y.style.display = "none";
        }
        else if(x.style.display == "none") {
            x.style.display = "block";
        }
        else{
            x.style.display = "none";
        }
    }

单击其他按钮时隐藏一个表单（两个按钮，两个表单）（PHP / HTML / Javascript）

3 个答案: