why does innerHTML not work?

Question

I was trying to use innerHTML to change the div element with id content but it just blinks welcome on login and then disappears.I know its silly but can't understand why I'm getting this error. The code is as follows:

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

But the welcome does not display

You're **submitting** the form. So naturally the page is replaced with the response page from the server. — T.J. Crowder, Jan 14 '18 at 13:43
Possible duplicate of [Preventing form submit from reloading page](https://stackoverflow.com/questions/40950491/preventing-form-submit-from-reloading-page) and possibly hundreds of others — JJJ, Jan 14 '18 at 13:43

score 2 · Answer 1 · answered Jan 14 '18 at 14:03

Please use below mentioned code..i.e change the color:#ffffff; to some other color since your using white color it was not visible

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

The css adds a blue gradient background – Tushar Jan 15 '18 at 14:35 — Tushar, Jan 15 '18 at 14:35
how can it add without adding background blue style? – Dilip D Jan 16 '18 at 06:28 — Dilip D, Jan 16 '18 at 06:28
The css file does it -- signup.css – Tushar Jan 18 '18 at 12:31 — Tushar, Jan 18 '18 at 12:31

score 1 · Answer 2 · answered Jan 14 '18 at 13:44

Add return false; at the end of the function.

Or as people have commented, look at preventing submission of forms, or better still, look at the method preventDefault() that can be called on event objects (which get passed to click events if you supply a variable/parameter).

score 1 · Accepted Answer · answered Jan 14 '18 at 13:47

Instead of what Tyeth suggest, consider using

event.preventDefault();

To prevent the page from reloading. Something like this,

function validate() {
    event.preventDefault();

    // Further code down.

This will prevent the default action from being executed, and would show the content in your page that you have just added. Because, not every function has to return false;, and it might also break the logic if you are using linters or other tools such as TypeScript — it would assume as though you want to return a bool value and would indicate as such.

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

score 0 · Answer 4 · answered Jan 14 '18 at 14:22

You need to use Event.preventDefault() in you code to block the default event. Or return false.

I'm not sure where you'll use this code, but be careful with passwords/usernames.

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>

score 0 · Answer 5 · answered Jan 14 '18 at 16:02

Try replacing:

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

with:

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

Because when input type submit is clicked the form tries to send the response to the server and the page is reloaded. As recommended by MDN try using input type button or the element button when you want a custom button and execute JavaScript function.

why does innerHTML not work?

5 Answers5