Javascript 表单在提交后清除

我想让“成本”输入字段高亮显示为红色，如果用户单击“计算”按钮时未填写，则标记错误

我找到的解决方案是使用一个表单标记，但这似乎只是在单击“计算”后立即清除我的输出

我还是一名程序员新手，所以我很欣赏任何简单的解决方案或深思熟虑的解释：）

文件
成本：


装运：

小塑料袋

小盒子

大盒子

其他



计算

分钟
0
马克斯
0
document.getElementById（“calculateButton”）.addEventListener（“单击”，函数（）{
if（document.querySelector（'input[name=“cost”]”）。validity.valid=''）{
风险价值成本=0；
}else{var cost=parseFloat（document.querySelector（'input[name=“cost”]”）.value）；}
var shipping=document.querySelector（'input[name=“shipping”]：checked'）。值
如果（装运=“其他”）{
var other_input=parseFloat（document.querySelector（'input[name=“other_value”]）.value）
如果（其他输入=“”）{
console.log（'other_input:'+other_input，'请输入值'）
}else{shipping=other_input}
}
var-min；
var-max；
var小聚价格=3.90
var小盒子价格=3.50；
var大箱价格=6.98；
//最小计算
开关（装运）{
案例“小聚”：
最小值=（1.2*成本）+小多利价格+（（2*成本）*.17）；
document.getElementById（'min_value'）.innerHTML='$'+min.toFixed（2）；
控制台日志（分钟）；
打破
案例“小盒子”：
最小值=（1.2*成本）+小盒子价格+（（2*成本）*.17）；
document.getElementById（'min_value'）.innerHTML='$'+min.toFixed（2）；
控制台日志（分钟）；
打破
案例“大盒子”：
最小值=（1.2*成本）+大箱子价格+（（2*成本）*.17）；
document.getElementById（'min_value'）.innerHTML='$'+min.toFixed（2）；
控制台日志（分钟）；
打破
违约：
最低值=（1.2*成本）+其他投入+（（2*成本）*.17）；
document.getElementById（'min_value'）.innerHTML='$'+min.toFixed（2）；
控制台日志（分钟）；
打破
}
//最大计算
最大值=1.1*（成本*2）；
document.getElementById（'max_value'）.innerHTML='$'+max.toFixed（2）；
});

向eventListener添加“防止默认值”，以防止由于html表单标记而导致页面重新加载的默认功能

 document.getElementById("calculateButton").addEventListener("click", function(e){
         e.preventDefault();
....

---

示例：

我认为你的思路是对的。但是您需要“提交”按钮来调用验证代码。我强烈建议您在

表单中添加
。请看我引用的链接。