为input type="submit"与reset按钮添加确认弹窗时的功能异常问题求助

嗨，刚学JavaScript一天就能自己折腾表单确认功能，已经超棒啦！我仔细看了你的代码，发现两个小细节导致了当前的问题，咱们一步步来修正：

问题1：错误使用赋值运算符而非比较运算符 #

你在validate函数里的判断逻辑写错了：

if (response = true){

这里的=是赋值运算符，它会把true直接赋值给response变量——不管用户实际点了OK还是Cancel，这个条件都会永远成立，所以控制台始终显示“Ok was selected”，并且函数永远返回true，导致按钮的默认行为一定会执行。

修正方案 #

把赋值改成严格比较运算符===，或者更简洁地直接使用布尔值本身（因为confirm()返回的就是布尔值）：

function validate() {
 console.log("I am in the validate function");
 var response = confirm("Are you sure?");
 if (response){ // 等价于 response === true
 console.log("Ok was selected");
 return true;
 } else{
 console.log("Cancel was selected"); // 这里你还打错了单词，把as改成was啦
 return false;
 }
}

问题2：Reset按钮的onClick没有返回验证结果 #

你的提交按钮写了onClick="return validate()"，这意味着当validate()返回false时，会阻止表单提交的默认行为；但重置按钮只写了onClick="validate()"——不管验证函数返回什么，浏览器都会直接执行重置表单的默认操作。

修正方案 #

给Reset按钮的onClick也加上return：

<div class="row">
 <input type="submit" value="Submit" onClick="return validate()"/>
 <input type="reset" value="Reset" onClick="return validate()"/>
</div>

修正后的效果 #

现在当你点击OK时，函数返回true，浏览器执行提交/重置；点击Cancel时，函数返回false，浏览器会阻止默认的提交/重置行为，控制台也会正确输出对应的日志啦。

内容的提问来源于stack exchange，提问作者krzychostal