未理解的现象
HTML:
<body>
<div id="counterB">
counter A:<div id="counterA">0</div>
counter B:
</div>
<input type="button" onclick="start()" value="+1">
<script src="script.js"></script>
</body>JS:
let counterA = document.getElementById("counterA");
let counterB = document.getElementById("counterB");
let c = 0;
function start() {
c++;
counterB.innerHTML += "<div>" + c.toString() + "</div>";
counterA.innerHTML = c.toString();
if (counterA.innerHTML != "0") {
throw new Error("counterA成功+1");
}
}counterB添加字符串发生在counterA更新数值之前，似乎并不会覆盖掉counterA的结果。
因此，运行前的期望是B正常添加一个数字，A数值加一，但结果并不是这样。考虑到A被嵌套在counterB里面，可能是因为结果更新有冲突而没有顺利加一，添加了一个Error来检查A更新数值的情况。
如果A没有更新数值，则不应该抛出Error。
但是实际上counterA没有数值的更新，却抛出Error。
尝试在js中将A和B的顺序交换，
let counterA = document.getElementById("counterA");
let counterB = document.getElementById("counterB");
let c = 0;
function start() {
c++;
// 已将下两行交换顺序
counterA.innerHTML = c.toString();
counterB.innerHTML += "<div>" + c.toString() + "</div>";
if (counterA.innerHTML != "0") {
throw new Error("counterA成功+1");
}
}
结果A的数值加且仅加了1 ，依然抛出3次“成功”的Error。
扫一扫
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
