五个语句后JavaScript语句将不起作用

Question

 #chkinDIV { width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #roomDIV { width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #roomcatDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #chkoutDIV { width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #HsetupDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #currencyDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #marketDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #travelagDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #roommasterDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #guestmasterDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #guestmessageDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #guestlocationDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #forecastDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #entryDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } #taNewDIV{ width: 100%; display: none; border-radius: 5px; border: 1px solid black; } 

 <!--currency--> <div id="currencyDIV" > <div class="container"> <h4>Currency</h4> <form class="form-inline" > <div class="form-group"> <label for="RoomID">Currency Code:</label> <input type="text" class="form-control" id="ccode" onkeypress="validate()"> <label for="Room Name">Curreny Name:</label> <input type="text" class="form-control" id="cname" onkeypress="validate()"><br/> <label for="Price">Rate:</label> <input type="number" class="form-control" id="crate" onkeypress="validate()"> <label for="Price">Convertion Rate:</label> <input type="text" class="form-control" id="ccnverrate" disabled> <br/><br/> <button type="button" id="sub" value="submit" name="submit" class="btn btn-success" onclick="currValidate()">Submit </button> <button type="submit" value="submit" name="submit" class="btn btn-default" onclick=" document.getElementById('cancel').style.display='none';">Edit </button> <button type="submit" value="submit" name="submit" id="cancel" class="btn btn-danger" onclick="document.getElementById('currencyDIV').style.display='none';">Cancel </button> <br/> </div> </form> </div> </div> <!--rooms DIV--> <div id="roomDIV"> <div class="container"> <h4>Room Type</h4> <form class="form-inline" action="/action_page.php"> <div class="form-group"> <label for="RoomID">Room ID:</label> <input type="text" class="form-control" id="rmid"> <label for="Room Name">Room Name:</label> <input type="text" class="form-control" id="rmname"> <label for="Price">Price:</label> <input type="text" class="form-control" id="rmprice"><br/><br/> <button type="submit" value="submit" name="submit" class="btn btn-success">Submit </button> <button type="submit" value="submit" name="submit" class="btn btn-default">Edit </button><br/> </div> </form> </div> </div> <!--Check-in DIV--> <div id="chkinDIV"> <div class="container"> <h3>Check - in</h3> <form class="form-inline" action="/action_page.php"> <div class="form-group"> <label for="chkin">Check in ID:</label> <input type="text" class="form-control" id="hname"> <label for="rsrvid">Reserve ID:</label> <input type="text" class="form-control" id="rsrvid"> <label for="Arrival">Arrival:</label> <input type="text" class="form-control" id="arrival"> <label for="time">Time:</label> <input type="text" class="form-control" name="birthday" value="10/24/2001"/><br/><br/> <button type="submit" value="submit" name="submit" class="btn btn-success">Submit </button> <button type="submit" value="submit" name="submit" class="btn btn-default">Edit </button><br/> </div> </form> </div> </div> <!--chkout DIV--> <div id="chkoutDIV"> <div class="container"> <h4>Check out</h4> <table class="table" > <tbody> <tr> <td>Reserve ID</td> <td> <input type="text" class="form-control" id="chkout_id"></td> <td>Date</td> <td> <input type="text" class="form-control" name="birthday" value="10/24/2001"/></td> </tr> </tbody> </table> </div> </div> <!--Hotel setup DIV--> <div id="HsetupDIV"> <div class="container"> <h4 text align="center">Hotel Setup</h4> <form class="form-inline" action="/action_page.php"> <div class="form-group"> <label for="Hotel Name">Hotel Name:</label> <input type="text" class="form-control" id="hname"> <label for="Slogan">Slogan:</label> <input type="text" class="form-control" id="slogan"> <label for="Phone">E-mail:</label> <input type="email" class="form-control" id="email"> <label for="Phone">Phone:</label> <input type="text" class="form-control" id="phoneN"><br/><br/> <label for="Slogan">Address Line 1:</label> <input type="text" class="form-control" id="adln1"><br/><br/> <label for="Phone">Address Line 2:</label> <input type="text" class="form-control" id="adln2"><br/><br/> <label for="Phone">Address Line 3:</label> <input type="text" class="form-control" id="adln3"><br/><br/> <button type="submit" value="submit" name="submit" class="btn btn-success">Submit </button> <button type="submit" value="submit" name="submit" class="btn btn-default">Edit </button><br/> </div> </form> </div> </div> 

我具有显示特定div的功能[here currencyDiV ]。 此函数接受所有div变量，并检查是否显示指定的div [此处currencyDiV ]。 如果不是这样，则会隐藏所有其他div并显示相关的div [此处currencyDiV ]。尽管这样做是为了在执行此操作之前执行直到[a.style.display =“ none”;]语句，而不是下面的语句。 新div会显示在现有div的下面[这里currencyDiV ]，而不会隐藏其他div。

当我按下一个按钮以显示指定的div [此处currencyDiV ]时，将执行此功能。 这与我编写的用于显示和隐藏div的所有其他功能相同。 这些功能最多只能执行四个语句

谁能告诉我我在做什么错或建议解决方案？

function currencyDIVshow() {
    var x = document.getElementById("chkinDIV");
    var y= document.getElementById("roomDIV");
    var z=document.getElementById("chkoutDIV");
    var a = document.getElementById("HsetupDIV");
    var b=document.getElementById("roommasterDIV");
    var c = document.getElementById("currencyDIV");
    if (c.style.display === "none") {
        c.style.display = "block";
        y.style.display="none";
        z.style.display="none";
        a.style.display="none";
        b.style.display="none";
        x.style.display="none";
    } else {
        c.style.display = "none";
    }
}

这是HTML代码

    <div class="btn-group">
        <div class="dropdown-menu" style="width: 50px; background-color:#178bb5; color: black;">
            <a class="btn btn-block btn" href="#" onclick="currencyDIVshow()" role="button" style="margin-bottom: 5px; color: white; text-align: left">Currency</a>

        </div>
    </div>

单击容器div的 货币 div时，该函数正在运行[here currencyDIVshow（） ]函数。

造型

 #currencyDIV{
    width: 100%;
    display: none;
    border-radius: 5px;
    border: 1px solid black;

}

Answer 1

我认为这种方法有些棘手，现在您可以使用以下解决方案：

1. 更改您的陈述条件：

    if(c.style.display !== "block") 

2. 从css删除display: none并在函数之前在javascript中添加display none：

    c.style.display = 'none' function currencyDIVshow() { var x = document.getElementById("chkinDIV"); var y= document.getElementById("roomDIV"); var z=document.getElementById("chkoutDIV"); var a = document.getElementById("HsetupDIV"); var b=document.getElementById("roommasterDIV"); var c = document.getElementById("currencyDIV"); if (c.style.display === "none") { c.style.display = "block"; y.style.display="none"; z.style.display="none"; a.style.display="none"; b.style.display="none"; x.style.display="none"; } else { c.style.display = "none"; } } 

Answer 2

没有ID为“ roommasterDIV”的元素

因此，您的javascript即将上线：

b.style.display="none";

并失败-如果您注释掉该行，或者添加具有该ID的元素，它将起作用。