innerHtml中的onBlur会阻止该功能

onBlur in innerHtml blocks the function

本文关键字：功能中的 onBlur innerHtml 更新时间：2023-09-26

我有两个函数，一个是动态创建一个带有输入字段的表，这些字段的维度基于用户插入的变量k，另一个函数读取用户在表的每个字段中再次插入的值，并将它们插入到我可以稍后调用的二维数组中。问题是创建表函数不适用于插入其代码中的 onBlur。代码如下：

<head>
    <script>
        var k;

            function genArray () {
                var A = [];
                    for (var i = 0; i < k; i++) {
                        A[i] = [];
                        for (var j = 0; j < k; j++) {
                            var id = "A" + (i + 1) + (j + 1);
                            A[i][j] = parseFloat(document.getElementById(id).value);
if (isNaN (A[i][j])) { 
                            alert ('Valoarea 'A[i][j]' nu este un numar. Reintroduceti valoarea');
}
                        }
                    }                       
            }
            function readGrad() {               
                k = parseInt(document.getElementById("grad").value);            
                if (isNaN(k)) {
                    alert('Gradul introdus nu este intreg, reintroduceti gradul matricii');
                }
                if (k == 0) {
                    alert ('Determinantul trebuie sa fie mai mare ca 1');
                }
                if (k == 1) {
                    alert ('Determinantul trebuie sa fie mai mare ca 1');
                }
                return k;
            }       
            function genTable(i,j) {            
                //var i,j = parseInt(document.getElementById("grad").value);
                var myTable = '<TABLE BORDER="1" BORDERCOLOR="BLACK">'n <TBODY>'n';
                for (i = 0; i < 1; i++) {
                    myTable += '  <TR>'n';
                    for (j = 0; j < k+1; j++) {
                        myTable += '    <TD>'+j+'</TD>'n';
                    }
                    myTable += '  </TR>'n';
                }
                for (i = 1; i < k+1; i++) {
                    myTable += '  <TR>'n';
                    for (j = 0; j < 1; j++) {
                        myTable += '    <TD>'+i+'</TD>'n';
                    }
                    for (j = 1; j < k+1; j++) {
                    myTable += '    <TD><input class="element" id="A' + i + j + '" onblur="genArray()"></TD>'n';
                    } 
                    myTable += '  </TR>'n';
                }
                myTable += ' </TBODY>'n</TABLE>'n';
                document.getElementById('container').innerHTML = myTable;
            }
    </script>
</head>
<body style="background-color: #777; color: ddd;">
    <div style="margin: 20px;">
        <h1>Program de calculare determinant matrice de orice grad.</h1>
    </div>
    <div>
        Introduceti gradul matricei
        <input id="grad" type="text" value="" style="width: 50px;" onChange="readGrad()">           
        <input style="margin-top: 20px;" type="button" name="Calculate determinant" value="Generati tabel" onClick="genTable()"> 
    </div>
    <form name="Det Matrice">
        <div style="margin-top: 100px; float: left; width: 100%;">
            Introduceti valorile: 
            <table style="text-align: center;">
                <div id="container"></div>
            </table>
            <br>
        </div>
</body>

更正警报的语法错误后，genTable（）工作。但是你的代码中有逻辑问题。将 onblur 事件处理程序添加到生成的表单元格中的每个文本字段。因此，每个单元格输入都将触发对 onblur 事件处理程序的调用，该处理程序将迭代整个表。我不认为这是你想要的。此外，在迭代过程中，您的parseFloat函数将在所有空单元格上失败。你应该只触发一次对genArray（）的调用，也许通过使用一个按钮。

尝试onblur="genArray()"而不是onBlur="genArray()"

请注意，它都是小写字母！

你的代码工作正常。只需更正第 15 行中的语法错误，如 jbabey 在注释中描述的那样。