为什么我的div不能更改其显示模式?

时间:2019-09-06 11:26:37

标签: javascript html css

在单击“按钮” div后,将调用chk()函数。在if语句中(在chk()函数内部),else if不起作用。应该将其他divs显示模式设置为“阻止”(在此之前,显示设置为“无”)。

我尝试使用不同的方法来查看else是否正确发生,但是其中没有任何效果(我尝试使用.innerHTML ect放置临时的alert())。好像其他地方都不存在。另一方面,第一个if效果很好。只会导致问题。

HTML / JS

<script>
    function chk()
    {
        var login = document.getElementById("l").value;
        var haslo = document.getElementById("h").value;

        if(login == "adam123" && haslo == "haslo321")
        {
            window.location.href = "strTabelka.html";
        }
        else if(login != "adam123" || haslo != "haslo321")
        {
            docuemnt.getElementById("errorBox").style.display = "block";
        }
    }
</script>

    login: adam123<br>
    haslo: haslo321
    <div id="logbg">
        Logowanie
        <div id="logbox">
            Login <input type="text" id="l"><br><br>
            Hasło <input type="text" id="h">
            <div id="button" onclick="chk();">Zaloguj się</div>
            <div id="errorBox">Nieprawidłowy login lub hasło!</div>
        </div>
    </div>

按钮和errorBox div的CSS

#button
{
    margin-left:auto;
    margin-right:auto;
    margin-top: 30px;
    width:200px;
    height:35px;
    border:3px solid #ff6600;
    border-radius: 14px;
    padding-top:3px;
}
#button:hover
{
    background-color: #ff6600;
    cursor: pointer;
    transition: 0.5s;
}

#errorBox
{
    font-size:20px;
    margin-top:5px;
    display:none;
}

基本上,if语句检查用户是否输入了正确的登录名和密码。如果用户没有,则errorBox(其中包含一条用波兰语写成的消息:“不正确的用户名或密码”)将其显示模式从无更改为阻止,从而使消息可见。 PS。对这里和那里的波兰语语言感到抱歉(“ haslo在波兰语中是” password“:D)

2 个答案:

答案 0 :(得分:1)

您错过了拼写文档,对其进行了更改并成功运行。谢谢

 docuemnt.getElementById("errorBox").style.display = "block";

function chk() {
  var login = document.getElementById("l").value;
  var haslo = document.getElementById("h").value;

  if (login == "adam123" && haslo == "haslo321") {
    window.location.href = "strTabelka.html";
  } else if (login != "adam123" || haslo != "haslo321") {
    document.getElementById("errorBox").style.display = "block";
  }
}
#button {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 200px;
  height: 35px;
  border: 3px solid #ff6600;
  border-radius: 14px;
  padding-top: 3px;
}

#button:hover {
  background-color: #ff6600;
  cursor: pointer;
  transition: 0.5s;
}

#errorBox {
  font-size: 20px;
  margin-top: 5px;
  display: none;
}
login: adam123<br> haslo: haslo321
<div id="logbg">
  Logowanie
  <div id="logbox">
    Login <input type="text" id="l"><br><br> Hasło <input type="text" id="h">
    <div id="button" onclick="chk();">Zaloguj się</div>
    <div id="errorBox">Nieprawidłowy login lub hasło!</div>
  </div>
</div>

答案 1 :(得分:0)

您的JavaScript代码中有错字。在大括号前的最后一行代码中,您已经写了docuemnt而不是document。这就是为什么它不起作用。

function chk() {
  var login = document.getElementById("l").value;
  var haslo = document.getElementById("h").value;

  if (login == "adam123" && haslo == "haslo321") {
    window.location.href = "strTabelka.html";
  } else if (login != "adam123" || haslo != "haslo321") {
    document.getElementById("errorBox").style.display = "block";
  }
}
#button {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 200px;
  height: 35px;
  border: 3px solid #ff6600;
  border-radius: 14px;
  padding-top: 3px;
}

#button:hover {
  background-color: #ff6600;
  cursor: pointer;
  transition: 0.5s;
}

#errorBox {
  font-size: 20px;
  margin-top: 5px;
  display: none;
}
login: adam123<br> haslo: haslo321
<div id="logbg">
  Logowanie
  <div id="logbox">
    Login <input type="text" id="l"><br><br> Hasło <input type="text" id="h">
    <div id="button" onclick="chk();">Zaloguj się</div>
    <div id="errorBox">Nieprawidłowy login lub hasło!</div>
  </div>
</div>