我想创建一个带有加法和减法的矩阵计算器。我做了它，这样我就可以输入列和行数。它工作正常，除了在一个函数激活后，它停止识别函数，好像它们不存在一样。我怀疑this关键字有问题，但我不确定是什么。下面是一个代码片段（使用完整页面）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
font-family: 'Comic Sans MS'
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input {
font-size: 50px;
text-align: center;
width: 96px;
height: 96px;
border: 2px solid black;
margin: 0px;
padding: 0px;
}
div {
position: absolute;
border: 2px solid black;
border-radius: 5px;
width: 300px;
height: 200px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#d1 {
top: 25px;
left: 25px;
}
#d2 {
top: 25px;
right: 25px;
}
#o {
position: absolute;
top: 500px;
left: 25px;
align: center;
}
button {
position: absolute;
border: 4px solid black;
font-size: 50px;
top: 300px;
left: 25px;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 5px;
}
#add {
left: 25px;
}
#sub {
left: 150px;
}
p {
position: absolute;
border: 2px solid black;
padding: 5px;
border-radius: 10px;
width: 160px;
top: 25px;
left: 40%;
font-size: 25px;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
#r, #c {
border: 1px solid black;
border-radius: 5px;
height: 25px;
width: 50px;
font-size: 20px
}
</style>
</head>
<body>
<div id="d1">
<input type="number" id="a1">
<input type="number" id="a2">
<input type="number" id="a3">
<input type="number" id="a4">
<input type="number" id="a5">
<input type="number" id="a6">
</div>
<div id="d2">
<input type="number" id="b1">
<input type="number" id="b2">
<input type="number" id="b3">
<input type="number" id="b4">
<input type="number" id="b5">
<input type="number" id="b6">
</div>
<button onclick="add()" id="add">+</button>
<button onclick="sub()" id="sub">-</button>
<div id="o">
<input type="number">
<input type="number">
<input type="number">
<input type="number">
<input type="number">
<input type="number">
</div>
<p>
Rows: <input type="number" id="r">
Columns: <input type="number" id="c">
</p>
<script>
d1 = document.getElementById("d1");
d2 = document.getElementById("d2");
o = document.getElementById("o");
rr = document.getElementById("r");
cc = document.getElementById("c");
r = 2;
c = 3;
t = r*c;
function reg(p1, p2, p3) {
p1.style.width = 100*r+"px";
p1.style.height = 100*c+"px";
p1.textContent = '';
t = r*c;
for (let i = 1; i <= t; i++) {
document.getElementById(p2).innerHTML += "<input type='number' id='"+p3+i+"'>";
}
}
[rr, cc].forEach(function(el) {
el.addEventListener('keyup', function () {
r = rr.value;
c = cc.value;
reg(d1, "d1", "a");
reg(d2, "d2", "b");
reg(o, "o", "o");
});
});
function add() {
let i = 1;
o.textContent = '';
for (i = 1; i <= t; i++) {
x = 'a'+i;
y = 'b'+i;
this["a"+i] = document.getElementById("a"+i).value;
this["b"+i] = document.getElementById("b"+i).value;
add = parseInt(this[x]) + parseInt(this[y]);
document.getElementById("o").innerHTML += "<input type='number' value="+add+">";
}
}
function sub() {
o.textContent = '';
for (let i = 1; i <= t; i++) {
x = 'a'+i;
y = 'b'+i;
this["a"+i] = document.getElementById("a"+i).value;
this["b"+i] = document.getElementById("b"+i).value;
sub = parseInt(this[x]) - parseInt(this[y]);
document.getElementById("o").innerHTML += "<input type='number' value="+sub+">";
}
i = 1;
}
</script>
</body>
</html>
1条答案
按热度按时间sdnqo3pr1#
因为你用新值覆盖了函数：
在你重新给
add赋值之后（后来又给sub赋值），这个全局变量就不再引用这个函数了。这里的教训是在代码中引用多个事物时使用多个名称。例如，您可以声明一个新变量：
(Or任何你想使用的名字 *，但在这个上下文中还没有使用过 *。）然后，当你需要使用这个数值时，你可以使用 that 变量。