我目前正在处理一项任务，目前处于停滞状态。该程序具有函数function createGrid()。该函数旨在根据用户在表单上的输入框中为rows和columns输入的内容，创建一个具有变量letters的网格。letters是所有大写字母的整个字母表。function createGrid()不输出任何内容，我也没有语法错误。function createGrid()的输出如下所示。唯一有效的函数是function resetForm()。有人知道我哪里出错了吗？
函数应该如何工作以及输出应该是什么样子的示例：用户为行输入3，为列输入30
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D
Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C
Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B
我的代码当前
<script>
function createGrid(){
let script = "";
let rows = document.getElementsByName("rows").value;
let columns = document.getElementsByName("columns").value;
let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// outer for loop to display rows
for (let i = 0; i < rows; i++){
script += letters.charAt(i);
// inner for loop to display columns
for (let j =0; j < columns; j++){
let k = (i * rows + j)% 26;
script += letters.charAt(k);
}
script += "<br>";
}
//creates grid and displays in the <pre> tag
document.getElementById("results").innerHTML = script;
}
function resetForm(){
document.getElementsByName("myForm")[0].reset();
rows = document.getElementsByName("rows").value; ;
second = document.getElementsByName("columns").value;
}
</script>
<body>
<h1>Letter Grid</h1>
<form name="myForm">
Number of Rows
<!--prompts user to input number of rows -->
<input type="number" name="rows" value="">
Number of Columns
<!--allows user to input number of columns-->
<input type = "number" name="columns" value="" >
<!--submit button to initiate function using users input-->
<input type="button" value="Submit Values" onclick="javascript:createGrid()">
<!--resets the form so user can insert different numbers-->
<input type="button" onclick="resetForm();" value="Reset the form" >
<pre id="results"></pre>
</form>
</body>
document.getElementsByName返回一个元素数组，而不是奇异元素。
因此，您只需将其更改为document.getElementsByName("rows")[0].value，列也是如此。
或者，您可以使用querySelector，它通过使用document.querySelector('input[name="rows"]').value;定位name属性来返回单个项目。
我在下面的例子中包括了这两个。
校正后的小提琴
function createGrid(){
let script = "";
let rows = document.querySelector('input[name="rows"]').value; //changed this line to demonstrate querySelector
let columns = document.getElementsByName("columns")[0].value; //also changed this line to show how to select the first item in the array
let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// outer for loop to display rows
for (let i = 0; i < rows; i++){
script += letters.charAt(i);
// inner for loop to display columns
for (let j =0; j < columns; j++){
let k = (i * rows + j)% 26;
script += letters.charAt(k);
}
script += "<br>";
}
//creates grid and displays in the <pre> tag
document.getElementById("results").innerHTML = script;
}
function resetForm(){
document.getElementsByName("myForm")[0].reset();
rows = document.getElementsByName("rows").value; ;
second = document.getElementsByName("columns").value;
}<body>
<h1>Letter Grid</h1>
<form name="myForm">
Number of Rows
<!--prompts user to input number of rows -->
<input type="number" name="rows" value="">
Number of Columns
<!--allows user to input number of columns-->
<input type = "number" name="columns" value="" >
<!--submit button to initiate function using users input-->
<input type="button" value="Submit Values" onclick="javascript:createGrid()">
<!--resets the form so user can insert different numbers-->
<input type="button" onclick="resetForm();" value="Reset the form" >
<pre id="results"></pre>
</form>
</body>