How can I display the result from the age (membership) calculator in JavaScript?

Question

I am working on a function to calculate elapsed time from memberships, similar to the age calculator function. So, when I click the button, it shows the result but just for few seconds, like a flash. I barely see the numbers and it seems to be doing the calculation fine. It is the first time that I see something like that since I started programming. Any idea why this might be happening?

here's code:

 let daysM = document.getElementById("mem-date"); let monthM = document.getElementById("mem-month"); let yearM = document.getElementById("mem-year"); let timeM = document.getElementById("mem-time"); const button = document.getElementById("calc-btn"); var today = new Date(); let d = today.getDate(); let m = today.getMonth() + 1; let y = today.getFullYear(); let maxDays = 0; let monthNum = 1; button.addEventListener("click", (days, month, year) => { days = daysM.value; month = monthM.value; year = yearM.value; if (daysM.value == "" || monthM.value == "" || yearM.value == "") { return alert("Please enter the date properly"); } if (m == 1) { // Jan maxDays = 31; monthNum = 1; } else if (m == 2) { // Feb maxDays = 28; monthNum = 2; } else if (m == 3) { // Mar maxDays = 31; monthNum = 3; } else if (m == 4) { // Apr maxDays = 30; monthNum = 4; } else if (m == 5) { // May maxDays = 31; monthNum = 5; } else if (m == 6) { // Jun maxDays = 30; monthNum = 6; } else if (m == 7) { // Jul maxDays = 31; monthNum = 7; } else if (m == 8) { // Aug maxDays = 31; monthNum = 8; } else if (m == 9) { // Sep maxDays = 30; monthNum = 9; } else if (m == 10) { // Oct maxDays = 31; monthNum = 10; } else if (m == 11) { // Nov maxDays = 30; monthNum = 11; } else { // Dec maxDays = 31; monthNum = 12; } var memYears = y - year; if (m <= month) { m = m + 12; } var memMonths = m - month; var memDays = (maxDays - d) + parseInt(days); timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`; })

 <h1 class="headings1">Memberships</h1> <form> <label id="member" for="memberdate">Enter the date you became member</label> <input type="number" id="mem-date" class="mem-input" placeholder="date"> <input type="number" id="mem-month" class="mem-input" placeholder="month"> <input type="number" id="mem-year" class="mem-input" placeholder="year"> <button id="calc-btn">Calculate</button> </form> <div id="timeSection"> <p id="mem-time"></p> </div>

Thanks in advance for your help!!!

Answer 1

You have a form when you click on the button it's being submitted and page is being re-rendered. So either add onsubmit="return false;" to prevent submission of the form or better yet just remove the form tag since it is not required at all.

 let daysM = document.getElementById("mem-date"); let monthM = document.getElementById("mem-month"); let yearM = document.getElementById("mem-year"); let timeM = document.getElementById("mem-time"); const button = document.getElementById("calc-btn"); var today = new Date(); let d = today.getDate(); let m = today.getMonth() + 1; let y = today.getFullYear(); let maxDays = 0; let monthNum = 1; button.addEventListener("click", (days, month, year) => { days = daysM.value; month = monthM.value; year = yearM.value; if (daysM.value == "" || monthM.value == "" || yearM.value == "") { return alert("Please enter the date properly"); } if (m == 1) { // Jan maxDays = 31; monthNum = 1; } else if (m == 2) { // Feb maxDays = 28; monthNum = 2; } else if (m == 3) { // Mar maxDays = 31; monthNum = 3; } else if (m == 4) { // Apr maxDays = 30; monthNum = 4; } else if (m == 5) { // May maxDays = 31; monthNum = 5; } else if (m == 6) { // Jun maxDays = 30; monthNum = 6; } else if (m == 7) { // Jul maxDays = 31; monthNum = 7; } else if (m == 8) { // Aug maxDays = 31; monthNum = 8; } else if (m == 9) { // Sep maxDays = 30; monthNum = 9; } else if (m == 10) { // Oct maxDays = 31; monthNum = 10; } else if (m == 11) { // Nov maxDays = 30; monthNum = 11; } else { // Dec maxDays = 31; monthNum = 12; } var memYears = y - year; if (m <= month) { m = m + 12; } var memMonths = m - month; var memDays = (maxDays - d) + parseInt(days); timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`; })

 <h1 class="headings1">Memberships</h1> <form onsubmit="return false;"> <label id="member" for="memberdate">Enter the date you became member</label> <input type="number" id="mem-date" class="mem-input" placeholder="date"> <input type="number" id="mem-month" class="mem-input" placeholder="month"> <input type="number" id="mem-year" class="mem-input" placeholder="year"> <button id="calc-btn">Calculate</button> </form> <div id="timeSection"> <p id="mem-time"></p> </div>

Answer 2

This is because your form get submitted and page gets refreshed which is its default behavior, you have to prevent its default behavior, You can do as

Read docs about preventDefault

button.addEventListener("click", (e) => {
  e.preventDefault();

You can prevent its behavior using event object that is passed to the callback that you passed to addEventListener

 let daysM = document.getElementById("mem-date"); let monthM = document.getElementById("mem-month"); let yearM = document.getElementById("mem-year"); let timeM = document.getElementById("mem-time"); const button = document.getElementById("calc-btn"); var today = new Date(); let d = today.getDate(); let m = today.getMonth() + 1; let y = today.getFullYear(); let maxDays = 0; let monthNum = 1; button.addEventListener("click", (e) => { e.preventDefault(); days = daysM.value; month = monthM.value; year = yearM.value; if (daysM.value == "" || monthM.value == "" || yearM.value == "") { return alert("Please enter the date properly"); } if (m == 1) { // Jan maxDays = 31; monthNum = 1; } else if (m == 2) { // Feb maxDays = 28; monthNum = 2; } else if (m == 3) { // Mar maxDays = 31; monthNum = 3; } else if (m == 4) { // Apr maxDays = 30; monthNum = 4; } else if (m == 5) { // May maxDays = 31; monthNum = 5; } else if (m == 6) { // Jun maxDays = 30; monthNum = 6; } else if (m == 7) { // Jul maxDays = 31; monthNum = 7; } else if (m == 8) { // Aug maxDays = 31; monthNum = 8; } else if (m == 9) { // Sep maxDays = 30; monthNum = 9; } else if (m == 10) { // Oct maxDays = 31; monthNum = 10; } else if (m == 11) { // Nov maxDays = 30; monthNum = 11; } else { // Dec maxDays = 31; monthNum = 12; } var memYears = y - year; if (m <= month) { m = m + 12; } var memMonths = m - month; var memDays = (maxDays - d) + parseInt(days); timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`; })

 <h1 class="headings1">Memberships</h1> <form> <label id="member" for="memberdate">Enter the date you became member</label> <input type="number" id="mem-date" class="mem-input" placeholder="date"> <input type="number" id="mem-month" class="mem-input" placeholder="month"> <input type="number" id="mem-year" class="mem-input" placeholder="year"> <button id="calc-btn">Calculate</button> </form> <div id="timeSection"> <p id="mem-time"></p> </div>

Answer 3

Try to add the below line:-

 <button type='submit' id="calc-btn">Calculate</button>

and in JavaScript file try adding the event in the parameter as below:-

button.addEventListener("click", (days, month, year, event)

and add the below line in the JavaScript file:-

event.preventDefault();

I think it should work.