如何在JavaScript中显示年龄(成员)计算器的结果?

Question

我正在编写一个函数，用于计算成员的运行时间，类似于年龄计算器函数。所以，当我点击按钮时，它会显示结果，但只有几秒钟，就像闪光一样。我几乎没有看到数字，它似乎做得很好。这是我开始编程以来第一次看到这样的东西。知道为什么会这样吗?

代码:

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>

提前感谢您的帮助!!

Answer 1

你有一个表单，当你点击按钮，它被提交，页面被重新渲染。因此，要么添加onsubmit="return false;"以防止表单提交，要么干脆删除表单标签，因为它根本不需要。

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

这是因为你的form被提交并且页面被刷新这是它的默认行为，你必须阻止它的默认行为，你可以做

阅读关于preventDefault的文档

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

您可以使用event防止其行为对象传递给回调,你传递给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

尝试添加以下行:-

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

在JavaScript文件中尝试在参数中添加事件，如下所示:-

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

并在JavaScript文件中添加以下行:-

event.preventDefault();

我想这应该行得通。