#javascript #html
#javascript #HTML
Вопрос:
В настоящее время я работаю над заданием и в настоящее время застрял. В программе есть функция function createGrid() . Предполагается, что эта функция создает сетку с переменной letters на основе того, что пользователь вводит для rows и columns в полях ввода в форме . 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>
Комментарии:
1. Пытаясь что-то отладить, делайте самое простое, что вы можете придумать . У вас есть форма, несколько кнопок, две функции и т. Д., Разбросанные по Javascript и HTML. Сократите его до одной функции, одного div и посмотрите, сможете ли вы генерировать выходные данные (или даже сначала просто выводить на консоль JS). Затем добавляйте движущиеся части, медленно , по одной за раз. Если вы просто попытаетесь подключить кучу кода, не запуская его, вы не будете иметь ни малейшего представления о том, что происходит не так.
2. спасибо за совет
Ответ №1:
document.getElementsByName возвращает массив элементов, а не единичный элемент.
Таким образом, вам просто нужно изменить его на document.getElementsByName("rows")[0].value и то же самое для столбцов.
В качестве альтернативы вы можете использовать querySelector , который возвращает отдельный элемент, ориентируясь на name атрибут using document.querySelector('input[name="rows"]').value; .
Я включил оба в следующий пример.
Исправлена ошибка
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> Комментарии:
1. Аааа, хорошо, у меня изначально было это, но я изменил их все на
document.getElementsByName. Быстрый вопрос знаете ли вы, почему на выходе всегда отображаются два AA в начале grid ? Это единственный раз, когда отображаются два AA. Остальная часть сетки переходит в ABC … и так далее2. yeah
script = letters.charAt(i);выводит «A», а затем в циклеlet k = (i * rows j)% 26;также будет выводить «A» какi0, так иj0.3. о, хорошо. Теперь я понимаю. Как бы мне исправить возникновение двойного значения? должен ли я изменить
jзначение на 1?4. Вам будет интереснее попробовать и разобраться, но я дам вам подсказку, на данный момент вы фактически выводите дополнительный символ в строке из-за той же проблемы.
5. спасибо за практический запуск. Я вижу, что я делал неправильно. Я добавил
script =дважды, когда это действительно нужно было только во внутреннемforцикле