Question

我有这个CSS：

div.row{
    display: none;}
  div.login {
    height: 10em;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0;
    top: 50%;}

这个HTML：

<div id="login" class="login">
  <input type="password" style="width: 25%;" placeholder="Please enter your password">
  <button onclick="logincheck()">Login</button>
</div>
<div id ='row' class="row">...</div>

和这个JS：

function logincheck(){

   var pwd = document.getElementById('pw').value;
   var curpwd = 'somevalue';
   if(pwd === curpwd){
     alert('You are now logged in!');
     var mainpage = document.getElementById("row");
     var logger = document.getElementById("login");
     logger.style.display = "none !important";
     mainpage.style.display = "block";

  }else{
      alert('Sorry the password was not recognized, please try again.');
   }
  }

然而，在“您现在登录”窗口后，我的页面仍然保持不变。如何使登录div消失并使行div出现？此外，该脚本适用于chrome，但现在在资源管理器中。为什么呢？

Answer 1

您要将$query = "SELECT users.user_id, users.first_name WHERE users.active IS NULL AND "; $query .= implode( ' OR ', array_fill(0, count($terms), 'word=?') ); $query .= " GROUP BY users.user_id ORDER BY users.first_name DESC"; $stmt = mysqli_prepare($dbc, $query); $types = str_repeat('s', count($terms)); mysqli_stmt_bind_param($stmt, $types, ...$terms); mysqli_stmt_execute($stmt); mysqli_stmt_store_result($stmt); mysqli_stmt_bind_result($stmt, $user_id, $first_name); mysqli_stmt_fetch($stmt);分配给DOM元素pwd，但没有元素具有此类ID。您的第一步是向#pw元素添加pw的ID。

在此之后，您需要做的就是更改<input>的 style.display 值。您有正确的想法，但请注意，logger的值在JavaScript中无效。相反，只需使用none !important即可。这很有效， !important declaration 通常会因为 specificity 的最高级别而感到不满。

除了关于none的说明之外，请注意使用内联事件处理程序（例如!important）也是不好的做法。我已将此更新为在我的示例中使用 .addEventListener() ：

onclick=

var button = document.querySelector('#login button');
button.addEventListener("click", logincheck);

function logincheck() {
  var pwd = document.getElementById('pw').value;
  var curpwd = 'somevalue';
  
  if (pwd === curpwd) {
    alert('You are now logged in!');
    var mainpage = document.getElementById("row");
    var logger = document.getElementById("login");
    logger.style.display = "none";
    mainpage.style.display = "block";
  }
  else {
    alert('Sorry the password was not recognized, please try again.');
  }
}

div.row {
  display: none;
}

div.login {
  height: 10em;
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  top: 50%;
}

最后，请注意所有前端JavaScript 对用户可见，即使是模糊处理的。因此，此页面的任何访问者都将知道密码为<div id="login" class="login"> <input id="pw" type="password" style="width: 25%;" placeholder="Please enter your password"> <button>Login</button> </div> <div id='row' class="row">...</div>。如果这是针对安全页面的，那么您可能希望使用数据库和正确的加密，而不是依赖于前端JavaScript。

希望这会有所帮助：）

打开或关闭html

1 个答案: