The problem is all here.

function reset(){
  document.getElementById('ageinyears').remove();
  document.getElementById('ageInDays').remove();
  document.getElementById('ageInMonth').remove();
  document.getElementById('ageinhours').remove();
  document.getElementById('ageinminutes').remove();
  document.getElementById('ageinsecounds').remove();
  console.log('reset  success');
}

Change to

function reset(){
  document.getElementById('ageyear').remove();
  document.getElementById('ageinDays').remove();
  document.getElementById('ageinMonth').remove();
  document.getElementById('ageinhr').remove();
  document.getElementById('minuteage').remove();
  document.getElementById('secINage').remove();
  console.log('reset  success');
}

Let me explain

  1. Initially each parent (div[id="ageinyears"], div[id="ageInDays"], div[id="ageInMonth"], div[id="ageinhours"], div[id="ageinminutes"], div[id="ageinminutes"], div[id="ageinsecounds"]) have only 1 child = Lable

  2. when the user clicks on the button click me, you have logic to give birth to another child for each parent; New childs = (p[id="ageyear"], p[id="ageinDays"], p[id="ageinMonth"], p[id="ageinhr"], p[id="minuteage"], p[id="secINage"])

  3. The problem is… When the user clicks on the button reset using remove() method, you are commanding to kill few parents + few newborn babies instead of ONLY the newborn babies of the parents.. and all the newborn babies are required for your logic ID.appendChild() + Bonus:… This unethical Error/killing is happening just because of the wrong Ids.

Additional Help

You should handle the Reset button properly; I mean something like…

  1. Initial state of Reset: disabled

    <button type="button" id="reset" class="btn btn-danger mr-4" onclick="reset()" disabled><b>Reset</b></button>
    
  2. Enable it after a successful age calculation

    document.getElementById("reset").disabled = false;
    
  3. Disable it again after the reset

    document.getElementById("reset").disabled = true;
    

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<style>
*{
  margin: 0;
  padding: 0;
}
.flex-container{
  display: flex;
  border: 1px solid black;
  padding: 15px;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
}
.flex-container-result div{
  margin-top: 2px;
  border: 1px solid red;
  display: flex;
  padding: 10px;
  justify-content: center;
}
.flex-container-result label{
  font-size: 18px;
  font-weight: bold;
  text-transform: capitalize;
  display: flex;
  flex-direction: column;
}
</style>
</head>
<body>
<body>
  <div class="container">
   <h2>Age Calclator.</h2>
   <div class="flex-container">
     <div>
        <button type="button" class="btn btn-primary mr-5" onclick="ageCalculator()"><b>click me</b></button>
     </div>

     <div>
          <button type="button" id="reset" class="btn btn-danger mr-4" onclick="reset()" disabled><b>Reset</b></button>
     </div>

 </div>

   <div class="flex-container-result">
     <div id="ageinyears">
       <label>age in years :&nbsp  </label>
     </div>

     <div id="ageInDays">
       <label>age in days :&nbsp  </label>
      </div>

      <div id="ageInMonth">
        <label>age in month :&nbsp  </label>
      </div>


      <div id="ageinhours">
        <label>age in hours :&nbsp  </label>
      </div>

      <div id="ageinminutes">
        <label>age in minutes :&nbsp  </label>
      </div>

      <div id="ageinsecounds">
        <label>age in secounds :&nbsp  </label>
      </div>
   </div>

</div>

  <script src="proj1.js"></script>
</body>
<script id="jsbin-javascript">
function ageCalculator(){
  let birthyear = prompt('what is your birth year ?');

/*................FOR AGE IN YEAR.......................*/
  let ageInyear = (2020-birthyear);  //formula to calculate age by years.
  let ageh5 = document.createElement('p');
  let yearAnswer = document.createTextNode('You are ' + ageInyear + ' years old.');
  ageh5.setAttribute('id','ageyear');
  ageh5.appendChild(yearAnswer);
  document.getElementById('ageinyears').appendChild(ageh5);
  //console.log('year success');//display in console

  /*................FOR AGE IN MONTH.......................*/
  let ageMonth =(ageInyear * 12);
  let agemon = document.createElement('p');
  let monthAnswer = document.createTextNode('You are ' + ageMonth + ' old');
  agemon.setAttribute('id','ageinMonth');
  agemon.appendChild(monthAnswer);
  document.getElementById('ageInMonth').appendChild(agemon);
  //console.log('month success');

  /*................FOR AGE IN DAYS.......................*/
 let ageInDays = (2020-birthyear)*365;  //formula for calculating age in days.
 let agep = document.createElement('p');  //creating p or (h3,h4,h5) tag through js
 let daysAnswer = document.createTextNode('You are '+ ageInDays + ' days.')  //message that will be displayed on output.
 agep.setAttribute('id', 'ageinDays'); // creating id to h4and giving id name ageInDays.
 agep.appendChild(daysAnswer); //h5 child (sentence) display.
 document.getElementById('ageInDays').appendChild(agep);  //targeting id from HTML doc and adding h4 attribute to it (which is created in JS).
 //console.log('day success '); //display in console.

 /*................FOR AGE IN HOURS.......................*/
  let agehours = (ageInyear * 12 * 30 * 24); //formula to calculate age in hours
  let agehr = document.createElement('p');
  let hrAnswer = document.createTextNode('You are ' + agehours + ' hours old');
  agehr.setAttribute('id','ageinhr');
  agehr.appendChild(hrAnswer);
  document.getElementById('ageinhours').appendChild(agehr);
  //console.log('hour success');//display in console

  /*................FOR AGE IN MINUTES.......................*/
 let ageminute = (ageInyear * 12 * 30 * 24 * 60);
 let agemin = document.createElement('p');
 let minAnswer = document.createTextNode('You are ' + ageminute + ' minute old');
 agemin.setAttribute('id','minuteage');
 agemin.appendChild(minAnswer);
 document.getElementById('ageinminutes').appendChild(agemin);
 //console.log('minute success');

  /*................FOR AGE IN SECONDS.......................*/
  let agesec = (ageInyear * 12 * 30 * 24 * 60 * 60);
  let ageinsec = document.createElement('p');
  let secAnswer = document.createTextNode('You are ' + agesec + ' seconds old');
  ageinsec.setAttribute('id','secINage');
  ageinsec.appendChild(secAnswer);
  document.getElementById('ageinsecounds').appendChild(ageinsec);

  document.getElementById("reset").disabled = false;

  //console.log('second success');
}


function reset(){
  
  document.getElementById('ageyear').remove();
  document.getElementById('ageinDays').remove();
  document.getElementById('ageinMonth').remove();
  document.getElementById('ageinhr').remove();
  document.getElementById('minuteage').remove();
  document.getElementById('secINage').remove();
  console.log('reset  success');
  document.getElementById("reset").disabled = true;
  
 
}
</script>
</body>
</html>

Note: Yes, this will solve your problem but, seriously this is not the proper way of handling things in real-time but Squint is better than blindness right... so as of now you can use this piece, but, I suggest you to focus more on things by analysing real-time scenarios and code issues 🙂

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top