innerHTML is not displaying properly

Question

The problem I'm having is, if the user leaves the userdata input blank, I want it to target that input and display text, notifying them that it's a required field.

I'm using innerHTML to send the message to a div or directly to the input field but nothing is displayed. I have also tried to use <p>, <span> and that did not work either. Any help is appreciated.

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <form>
      <input type="text" id="user1">
      <div id="error"></div>
      <button onClick="test()">Work</button>
    </form>
    <script type="text/javascript">
      function test(){
        var userdata = document.getElementById("user1").value;
        if(userdata == ""){
          document.getElementById("error").innerHTML="Please fill in Blanks";
        }
      }
    </script>
  </body>
</html>

"I also tried to use \n\n, and nothing has worked", what is `\n\n`? — Niccolò Campolungo, Jul 20 '13 at 07:57
@starbeamrainbowlabs ROTFL I know, the OP forgot to use the code quotes `` as delimiters for his own tags, so they didn't show up, see the edit to understand what I say ;) — Niccolò Campolungo, Jul 20 '13 at 08:02
It is better to add else condition in javascript function, why because after entering empty value and click on work it works fine, but after entering a value and again click on work then inner HTML shows please fill in blanks... its wrong. So better to add else condition. View my answer :) — Naveen Kumar Alone, Jul 20 '13 at 08:29

Jonathan · Accepted Answer · 2013-07-20T08:07:29.810

2

Just change your button line in this way:

<button onClick="test();return false;">Work</button>

InnerHTML was working fine, but the default behaviour of the button was making a 'POST' request, making the page to refresh erasing the innerHtml changes. The return false statement disable this default behaviour making your code to work as it's supposed to do.

It's tested and working. Hope It helps.

edited Jul 20 '13 at 08:07

answered Jul 20 '13 at 08:01

Jonathan

11,809
5
57
91

Thanks @fmodos. Keep in mind that I'm really far from being an expert in web dev, so it's probably that exists a better and more elegant way to do it. But ¡Hey, It works! ;) – Jonathan Jul 20 '13 at 08:11
1

Thank you Jonathan !! worked fine. Also thanks for the explanation on the return false as well will keep it in mind. – Hugo Jul 20 '13 at 08:36

score 2 · Answer 2 · answered Jul 20 '13 at 08:08

2

Here is the JSBIN

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form>
      <input type="text" id="user1">
      <div id="error"></div>
      <button onClick="test();return false;">Work</button>
    </form>
</body>
</html>

And in JavaScript add else condition also

if(userdata === ""){
     document.getElementById("error").innerHTML="Please fill in Blanks";
} else{
     document.getElementById("error").innerHTML="";
}

answered Jul 20 '13 at 08:08

Naveen Kumar Alone

7,536
5
36
57

It is better to add else condition in javascript function, why because after entering empty value and click on work it works fine, but after entering a value and again click on work then inner HTML shows please fill in blanks... its wrong. So better to add else condition. – Naveen Kumar Alone Jul 20 '13 at 08:28
You could use a simple ternary operator to do it, lot of code saved – Niccolò Campolungo Jul 20 '13 at 08:30
@Hugo observe above posted JSBIN – Naveen Kumar Alone Jul 20 '13 at 09:22
If i want to Add text to the else statment, that would be the same as leaving it null right? – Hugo Jul 20 '13 at 10:36
not working when i add the else statment -------- if(userdata == ""){ document.getElementById("error").innerHTML="* Please fill in Blanks"; }else{ document.getElementById("error").innerHTML="No need to fill";} – Hugo Jul 20 '13 at 11:11
1

change if(userdata == "") to if(userdata === "") place === here is http://jsbin.com/ihagen/4/edit – Naveen Kumar Alone Jul 20 '13 at 11:38
thatwork great!!!! I've never seen anyone use the "===" what the difference between the two ? – Hugo Jul 20 '13 at 12:28
1

=== or also called 'strict comparison' means is the same type and equal, == means equal. For more about this http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons – Naveen Kumar Alone Jul 20 '13 at 12:30

innerHTML is not displaying properly

2 Answers2