CODEWITHSUNDEEP
javascripthtml
Sidwa
Sidwa

Reputation: 41

document.getElementById.innerHTML not working

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>

Upvotes: 1

Views: 4164

Answers (2)

Panchanand Mahto
Panchanand Mahto

Reputation: 151

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>

Upvotes: 1

heytools
heytools

Reputation: 782

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.

Upvotes: 2

Related Questions