Question

我试图使用innerHTML来更改带有id内容的div元素，但它只是在登录时闪烁欢迎然后消失。我知道它很愚蠢但不能理解我为什么会收到此错误。代码如下：

<html>
<head>
    <meta charset = "utf-8">
    <link rel="stylesheet" href="signup.css">
</head>
<body>  
    <div id="content" style = "float: left;"></div>
    <div class = "login">
        <div class = "icon">
            <img src="people.png" style ="width:50%; margin: 5% 25% 25% 25%;">
            <form>
                </br>
                <label>User name:</label>
                <input type = "text" id = "username" placeholder = "Enter username">
                </br></br></br></br>
                <label>Password:</label>
                <input type = "password" id = "password" placeholder = "Enter Password">
                </br></br></br></br>
                <input type = "submit" onclick ="return validate()" value ="Login">     
            </form>
        </div>
    </div>
</body>
<script type = "text/javascript">

    function validate(){
        if(document.getElementById("username").value=="Tushar"&&document.getElementById("password").value=="tushar"){
            alert("Hello");
            document.getElementById("content").innerHTML = '<h1 id = "welcome" style="font-size: 25px;color:#ffffff; ">Welcome</h1>';

        }
        else{
            alert("Invalid username/password");
        }
    }
</script>

但欢迎不会显示

Answer 1

在函数末尾添加 return false; 。

或者正如人们所评论的那样，看看阻止提交表单，或者更好的是，查看可以在事件对象上调用的方法https://bl.ocks.org/anonymous/dc6abcbd29a6496090467fbcf230e760/9ed42bcbc73276b41b7e66abfbc111b1bf09c72a（如果提供变量/参数，则会传递给单击事件）。

Answer 2

而不是Tyeth的建议，请考虑使用

防止页面重新加载。像这样的东西，

event.preventDefault();

这将阻止执行默认操作，并显示您刚刚添加的页面中的内容。因为，并非每个函数都必须function validate() { event.preventDefault(); // Further code down.，并且如果你使用linters或其他工具（如TypeScript），它也可能会破坏逻辑 - 它会假设您想要返回一个bool值并且会指示这样。

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 3

请使用下面提到的代码..改变颜色：#ffffff;由于你使用的是白色而没有看到其他颜色

＆＃13;

<html>
<head>
    <meta charset = "utf-8">
    <link rel="stylesheet" href="signup.css">
</head>
<body>  
    <div id="content" style = "float: left;"></div>
    <div class = "login">
        <div class = "icon">
            <img src="people.png" style ="width:50%; margin: 5% 25% 25% 25%;">
            <form>
                </br>
                <label>User name:</label>
                <input type = "text" id ="username" placeholder="Enter username"/>
                </br></br></br></br>
                <label>Password:</label>
                <input type = "password" id = "password" placeholder = "Enter Password">
                </br></br></br></br>
                <input type = "submit" onclick ="return validate()" value="Login">     
            </form>
        </div>
    </div>
</body>
<script type = "text/javascript">

    function validate(){
        if(document.getElementById("username").value=="Tushar"&&document.getElementById("password").value=="tushar"){
            alert("Hello");
            document.getElementById("content").innerHTML = '<h1 id = "welcome" style="font-size: 25px;color:red; ">Welcome</h1>';
return false;
        }
        else{
            alert("Invalid username/password");
            return false;
        }
    }
</script>

＆＃13;

Answer 4

您需要在代码中使用Event.preventDefault()来阻止默认事件。或return false。

我不确定您将在何处使用此代码，但请注意密码/用户名。

＆＃13;

function validate(e){
  e.preventDefault();

  var $username = document.getElementById("username");
  var $password = document.getElementById("password"); 
  var $content = document.getElementById("content");
  var isValidCredentials = ($username.value==="Tushar"&& $password.value==="tushar")

  if (!isValidCredentials) {
    $content.innerHTML = '';
    $content.style.display = 'none';
    window.alert('Invalid');
    return;
  }
  
  // window.alert('Welcome!');
  $content.style.display = 'block';
  $content.innerHTML = '<h1 id = "welcome" style="font-size: 25px;color:#ffffff; ">Welcome</h1>';
}

document.getElementById('form').addEventListener('submit', validate, false);

＆＃13;

<div id="content" style="display:none;background:red;color:#FFF;"></div>
<div class="login">
  <div class = "icon">
    <img src="https://static.pexels.com/photos/54632/cat-animal-eyes-grey-54632.jpeg" width="150" style="margin:0 auto;">
    <form id="form">
      <label>User name:</label>
      <input type = "text" id ="username" placeholder="Enter username"/>
      </br></br></br></br>
      <label>Password:</label>
      <input type = "password" id = "password" placeholder = "Enter Password">
      </br></br></br></br>
      <input type = "submit" value="Login">
    </form>
  </div>
</div>

＆＃13;

Answer 5

尝试更换：

<input type = "submit" onclick ="return validate()" value ="Login">

使用：

<input type = "button" onclick ="return validate()" value ="Login">

因为当单击输入类型提交时，表单会尝试将响应发送到服务器并重新加载页面。根据{{3}}的建议，当您需要自定义按钮并执行JavaScript功能时，请尝试使用输入类型按钮或元素按钮。

为什么innerHTML不起作用？

5 个答案: