javascript 函数运行一次后中断

guykilcj  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(91)

我想创建一个带有加法和减法的矩阵计算器。我做了它,这样我就可以输入列和行数。它工作正常,除了在一个函数激活后,它停止识别函数,好像它们不存在一样。我怀疑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>
sdnqo3pr

sdnqo3pr1#

因为你用新值覆盖了函数:

add = parseInt(this[x]) + parseInt(this[y]);

在你重新给add赋值之后(后来又给sub赋值),这个全局变量就不再引用这个函数了。
这里的教训是在代码中引用多个事物时使用多个名称。例如,您可以声明一个新变量:

let result = parseInt(this[x]) + parseInt(this[y]);

(Or任何你想使用的名字 *,但在这个上下文中还没有使用过 *。)然后,当你需要使用这个数值时,你可以使用 that 变量。

相关问题