为什么innerHTML 不起作用？答案

【问题标题】：why does innerHTML not work?为什么innerHTML 不起作用？
【发布时间】：2018-01-14 13:38:38
【问题描述】：

我试图使用 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>

但是欢迎不显示

【问题讨论】：

您正在提交表单。所以很自然地，页面被服务器的响应页面替换了。
Preventing form submit from reloading page 的可能副本以及其他数百个副本

标签： javascript html

【解决方案1】：

请使用下面提到的代码..即改变颜色：#ffffff;换成其他颜色，因为您使用的是白色，所以它是不可见的

<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>

【讨论】：

css添加蓝色渐变背景
不加背景蓝色样式怎么加？
css 文件做到了——signup.css

【解决方案2】：

考虑使用

，而不是 Tyeth 的建议

event.preventDefault();

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

function validate() {
    event.preventDefault();

    // Further code down.

这将阻止执行默认操作，并在您的页面中显示您刚刚添加的内容。因为，不是每个函数都必须return false;，如果您使用 linter 或其他工具（如 TypeScript），它也可能会破坏逻辑——它会假设您想要返回一个 bool 值并会这样指示。

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

【讨论】：

【解决方案3】：

在函数末尾添加return false;。

或者正如人们评论的那样，看看防止提交表单，或者更好的是，看看可以在事件对象上调用的方法preventDefault()（如果你提供变量/参数，它会传递给点击事件）。

【讨论】：

【解决方案4】：

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

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

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);

<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>

【讨论】：

【解决方案5】：

尝试替换：

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

与：

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

因为单击输入类型提交时，表单会尝试将响应发送到服务器并重新加载页面。正如MDN 推荐的那样，当您想要自定义按钮并执行 JavaScript 功能时，请尝试使用输入类型按钮或元素按钮。

【讨论】：