JavaScript 代码调试：为什么判断结果总是失败？
这段代码中 top1 的值加上 top2 的值是等于 top3 的，为什么反馈的是 else 的结果内容？
在代码中，当点击查询结果按钮时，会判断 top1 和 top2 的值相加是否等于 top3 的值，如果相等则弹出成功的提示框，否则弹出失败的提示框。但是在代码中有一个问题，就是在获取元素时，top1、top2、top3 的获取都写成了 var top1 = document.getElementById('top1')，这样会导致 top2 和 top3 的获取出现问题，应该分别写成 var top1 = document.getElementById('top1')、var top2 = document.getElementById('top2')、var top3 = document.getElementById('top3')。
修改后的代码如下：
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var top1 = document.getElementById('top1');
var top2 = document.getElementById('top2');
var top3 = document.getElementById('top3');
var panduan = document.getElementById('panduan');
panduan.onclick =function(){
if(Number(top1.value)+Number(top2.value) == top3.value){
alert('您已经成功了');
}else{
alert('你彻底失败了');
}
}
}
</script>
<meta charset="UTF-8" />
<title>JavaScript 代码调试</title>
</head>
<body>
<input type="" name="">
<input type="button" name="" value="+" id="top1">
<input type="" name="">
<input type="button" name="" value="=" id="top2">
<input type="number" name="" id="top3">
<br>
<input type="" name="">
<input type="button" name="" value="+" id="top4">
<input type="" name="">
<input type="button" name="" value="=" id="top5">
<input type="" name="">
<br>
<input type="button" name="" value="查询结果" id="panduan">
</body>
</html>
错误分析：
代码中使用 var top1 = document.getElementById('top1') 这种方式来获取元素，会导致后面的 var top1 = document.getElementById('top2') 和 var top1 = document.getElementById('top3') 将之前的 top1 变量的值覆盖掉，最终导致获取到的都是 top3 元素。
解决方法：
应该使用不同的变量名来分别获取 top1、top2 和 top3 元素，例如 var top1 = document.getElementById('top1')、var top2 = document.getElementById('top2') 和 var top3 = document.getElementById('top3')。
总结：
在 JavaScript 代码中，使用 var 关键字声明的变量存在变量覆盖的问题，需要注意变量名重复的问题，避免出现意外的错误。
原文地址: https://www.cveoy.top/t/topic/oiqM 著作权归作者所有。请勿转载和采集!