document.getElementById.innerHTML not working

Question

document.getElementById gets the element (i.e p tag) but as soon as it writes in it the content disappears. There is no error on console but whatever is written within p tag disappears as soon as anything is written onto the p tag.

I can't find any reason for it not working also i'am not allowed to use php for accepting form inputs.

 
 

var d=new Date();
 var cday=d.getDay();
 var cmonth=d.getMonth();
 var cyear=d.getFullYear();
 var day,month,year,dage,mage,yage;
 function getDOB() {
  var DOB = new Date(document.getElementById("DOB").value);
  year = DOB.getFullYear();
  month = DOB.getMonth();
  day = DOB.getDay();
}

document.getElementById("inp").onclick = function execute() {
  getDOB();
  yage = cyear - year;

  if (cmonth >= month) {
    mage = cmonth - month;
  } else {
    mage = 12 - (month - cmonth);
    yage = yage - 1;
  }

  if (cday >= day) {
    dage = cday - day;
  } else {
    mage = mage - 1
    dage = 30 - (day - cday);
  }

  document.getElementById("output").innerHTML = "your age is " + dage + " days " + mage + " months " + yage + " years";
}

<html>

<head>
</head>

<body>
  <p id="month">
  </p>
  <form id="form">
    <!input type="text" id="day" placeholder="dd">
    <! input type="text" id="day" placeholder="mm">
    <!input type="text" id="day" placeholder="yyyy">
    <input type="date" id="DOB">
    <button id="inp">submit</button>
    <br>
  </form>
  <p id="output"></p>
  <script src="age.js"></script>
</body>

</html>

did you include the js file into your website? I see no script tags — Fallenreaper, Aug 12 '15 at 17:50
also, i like to wrap things in ready statements as well, that way the script will execute when the page finishes loading — Fallenreaper, Aug 12 '15 at 17:51
sorry that design aspect is alien to me, im used to certain code things being in certain parts of the page — Fallenreaper, Aug 12 '15 at 17:53
missing all `c*` variables, `cyear`, `cmonth` etc. Also, unnecessary use of global variables, almost every single variable is global. Your `age` could just be a `date` object which you then manipulate, would be easier — Jan, Aug 12 '15 at 17:57
Most browsers will submit your form upon button click (notably, Internet Explorer won't, unless the button is specifically marked as a submission button). So the page is getting reloaded. Hence, the text disappears shortly after it's inserted. — thewatcheruatu, Aug 12 '15 at 18:04
my page seems to reload after the last line in js is executed, i saw this when i replaced document.getElementById with document.write — Sidwa, Aug 12 '15 at 18:05
Well, if you want to do it that way, you can have your execute function return false at the end. Or use [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault). — thewatcheruatu, Aug 12 '15 at 18:07
return false works! thanks a lot. please add it as an answer so i could accept it — Sidwa, Aug 12 '15 at 18:10

heytools · Accepted Answer · 2015-08-12T18:11:29.663

2

Your code contains earlier errors and could not reach the innerHTML yet.

Here's the error to start with:

Uncaught ReferenceError: cyear is not defined

You'll also have to add return false; to the end of the function to prevent the form from submitting, as stated by @thewatcheruatu.

edited Aug 12 '15 at 18:11

answered Aug 12 '15 at 17:55

heytools

764
3
16

sorry i didn't add the declarations i have edited the question. – Sidwa Aug 12 '15 at 18:02

Panchanand Mahto · Answer 2 · 2015-08-12T18:45:13.697

date=new Date();           // Get current date
cyear=date.getFullYear();  // current year
cmonth=date.getMonth()+1;  // current month
cday=date.getDate();       // current day

function getDOB()
    {
        var DOB=new Date(document.getElementById("DOB").value);
        year=DOB.getFullYear();
        month=DOB.getMonth();
        day=DOB.getDate();     // getDate() function returns the current date      
    }

function execute()
    {
        getDOB();
        yage=cyear-year;
        if( cmonth>=month)
        {
            mage=cmonth-month;
        }
        else
        {
                mage=12-(month-cmonth);
                yage=yage-1;
        }
        if ( cday>=day )
        {
            dage=cday-day;
        }
        else
        {
            mage=mage-1
            dage=30-(day-cday);
        }
        document.getElementById("output").innerHTML="your age is "+dage+" days "+mage+" months "+yage+ " years";
    }

<html>
<head>
</head>
<body>
    <p id="month">
    </p>
    <form id="form">
        <!input type="text" id="day" placeholder="dd">
        <! input type="text" id="day" placeholder="mm">
        <!input type="text" id="day" placeholder="yyyy">
        <input type="date" id="DOB">
        <button type="button" id="inp" onclick="execute()">submit</button><br>
    </form>
    <p id="output"></p>
<script src="age.js"></script>
</body>
</html>

Can you provide some explanation of what was not working to help him understand its mistakes ? This is not just about pasting working code. — nioKi, Aug 12 '15 at 18:16
In code snippet it works perfectly, but if you will execute this code in your local system it will generate error. Because in your code `document.getElementById("inp")` executes before HTML renders. To overcome this you can call **execute()** function on button click. `` And your output get disappeared because **` — Panchanand Mahto, Aug 12 '15 at 18:42

document.getElementById.innerHTML not working

2 Answers2