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!!!
CodePudding user response：
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> CodePudding user response：
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>CodePudding user response：
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.