How to change textcontent via JavaScript?

Question

Below is the code I’ve written for a registration form in my website. I’ve an empty div to display errors. Before triggering PHP script I use JavaScript like below to check forms: 

function errorHandler(){

    var loginIn;

    var passIn;

 

    loginIn = document.forms["regForm"]["login"].value;

    passIn = document.forms["regForm"]["password"].value;

    if (loginIn == "" || loginIn == null) {

        alert("LOGIN CANNOT BE EMPTY");

        return false;

    } 

}

The below code displays the alert message when I call it: 

<form  name="regForm" action= "save_user.php" onsubmit="return errorHandler()" method="post">.

But I’ve a div like below inside the form. And It doesn’t execute. 

div id ="errorArea"></div> and when i try to put a text inside of this div like this:

 

function errorHandler(){

    var loginIn;

    var passIn;

    var erorAreaMessage;

    loginIn = document.forms["regForm"]["login"].value;

    passIn = document.forms["regForm"]["password"].value;

    erorAreaMessage = document.getElementById('errorArea').textContent;

    if (loginIn == "" || loginIn == null) {

        erorAreaMessage = "LOGIN CANNOT BE EMPTY";

        return false;

    }

}

Can anyone tell me why this happens?

Answer 1

You have to set the innerHTML or textContent property to your error-message in order to put the value inside the <div>

...

if (loginIn == "" || loginIn == null) {

    document.getElementById('errorArea').textContent = "LOGIN CANNOT BE EMPTY";

    return false;

}}

Interested in Java? Check out this Java tutorial by Intellipaat.