#javascript #html
#javascript #HTML
Вопрос:
Я ввел следующее ниже. Я пытаюсь запустить while цикл, позволяющий пользователю вводить только положительные числа и отображать их в трех полях ввода, расположенных на myForm . Я добавил в форму следующее reset , чтобы она очистила форму: <input type="reset" onclick="myForm" value="Reset the form" ></input> . Он очищает форму, но когда я нажимаю на поле ввода, чтобы добавить новые переменные, старые снова появляются, и он не запрашивает новые входные данные. Как мне исправить код, чтобы устранить эту проблему? Я добавил приведенный ниже код с комментариями, чтобы показать, что я пытался создать.
first = -1;
second = -1;
third = -1;
function getValues() {
//while loop to not allow negative numbers or strings//
while (isNaN(first) || first == "" || first < 0) {
first = prompt("Enter the first number.");
break;
}
//while loop to not allow negative numbers or strings//
while (isNaN(second) || second == "" || second < 0) {
second = prompt("Enter the second number.");
break;
}
//while loop to not allow negative numbers or strings//
while (isNaN(third) || third == "" || third < 0) {
third = prompt("Enter the third number.");
break;
}
document.myForm.first.value = first;
document.myForm.second.value = second;
document.myForm.third.value = third;
}
function determineLarge() {
let message = "";
//if statement to determine first number is the largest//
if (second < first amp;amp; third < first) {
message = "The first number" "(" first ")" " is larger.";
}
// else if statement to determine second number is the largest//
else if (first < second amp;amp; third < second) {
message = "The second number" "(" second ")" " is larger.";
}
//else if statement to determine the third number is the largest//
else if (first < third amp;amp; second < third) {
message = "The third number " "(" third ")" " is larger.";
}
//else if statement to determine the first number as the largest number if any values are equal//
else if (first == second || second == first || first == third || second == third) {
message = "The first number" "(" first ")" " is largerer.";
}
document.getElementById("results").innerHTML = message;
//fucntion to reset form//
function myForm() {
document.getElementById("myForm").reset();
}
} <body>
<h1>Gary's Largest of Three Numbers</h1>
<!-- estasblishing form name-->
<form name="myForm">
<p> Enter the first number</p>
<!--prompts user for first input-->
<input type="number" name="first" value="" onclick="javascript:getValues();">
<p>Enter the second number</p>
<!--prompts user for second input-->
<input type="number" name="second" value="" onclick="javascript:getValues();">
<p>Enter the third number</p>
<!--prompts user for third input-->
<input type="number" name="third" value="" onclick="javascript:getValues()">
<!--runs the function to determine the largest number-->
<button type="button" onclick="determineLarge();">Determine the larger number</button>
<!--resets the form so user can insert different numbers-->
<input type="reset" onclick="myForm" value="Reset the form"></input>
</form>
<div id="results"> </div> Комментарии:
2. Пара замечаний: вам не нужны
javascript:onclickатрибуты. Такжеinputэлементы не требуются</input>, и фактически их добавление является ошибкой. Ни то, ни другое не вызывает вашей проблемы; просто что-то, что нужно учитывать.3.
resetвсегда сбрасывает значенияinputs до значения ихvalueатрибутов при загрузке страницы. Обратите внимание, что вы определили своюmyForm()функцию внутри своейdetermineLarge()функции и неправильно ссылались на нее вonclickатрибуте; это должно бытьonclick="myForm()"в круглых скобках. Но на самом деле, пока у вас естьtype="reset", вам не нужно добавлять к нему обработчик событий.
Ответ №1:
Здесь есть ряд проблем. Во-первых, это выглядит как простая, обычная опечатка : onclick="myForm" .Чтобы было ясно, это не вызов myForm() функции, в которой есть reset() вызовы. Вам нужны скобки.
Во-вторых, исправление этого выявляет другую проблему: ваш сброс происходил из-за того, что вы используете type="reset" onclick="myForm" , который является методом сброса формы. (Источник: Developer.Mozilla.org .) Мне нужно myForm() было просто переименовать функцию в resetForm() , чтобы oncall= она действительно выполнялась после этого переименования.
В-третьих, у вас нет идентификатора для этого элемента, поэтому getElementById() мы ничего не возвращаем, поэтому попробуйте : document.getElementsByName("myForm")[0].reset(); . Или вы можете добавить идентификатор и продолжить использовать getElementById() , на ваш выбор.
В-четвертых, вам нужно сбросить внутренние переменные, которые вы привязали к трем значениям, чтобы getValues() функция увидела правильные данные.
Взгляните:
first = -1;
second = -1;
third = -1;
function getValues(){
//while loop to not allow negative numbers or strings//
while(isNaN(first) || first == "" || first < 0){
first = prompt ("Enter the first number.");
break;
}
//while loop to not allow negative numbers or strings//
while(isNaN(second) || second == "" || second < 0){
second = prompt ("Enter the second number.");
break;
}
//while loop to not allow negative numbers or strings//
while(isNaN(third) || third == "" || third < 0){
third = prompt ("Enter the third number.");
break;
}
document.myForm.first.value = first;
document.myForm.second.value = second;
document.myForm.third.value = third;
}
function resetForm(){
document.getElementsByName("myForm")[0].reset();
first = -1;
second = -1;
third = -1;
}
function determineLarge(){
let message = "";
//if statement to determine first number is the largest//
if (second < first amp;amp; third < first){
message = "The first number" "(" first ")" " is larger.";
}
// else if statement to determine second number is the largest//
else if (first > second amp;amp; third > second) {
message = "The second number" "(" second ")" " is larger.";
}
//else if statement to determine the third number is the largest//
else if (first > third amp;amp; second > third){
message = "The third number " "(" third ")" " is larger.";
}
//else if statement to determine the first number as the largest number if any values are equal//
else if (first == second || second==first || first==third || second ==third){
message = "The first number" "(" first ")" " is largerer.";
}
document.getElementById("results").innerHTML = message;
} <body>
<h1>Gary's Largest of Three Numbers</h1>
<!-- estasblishing form name-->
<form name="myForm" >
<p> Enter the first number</p>
<!--prompts user for first input-->
<input type="number" name="first" value="" onclick="javascript:getValues();">
<p>Enter the second number</p>
<!--prompts user for second input-->
<input type="number" name="second" value="" onclick="javascript:getValues();">
<p>Enter the third number</p>
<!--prompts user for third input-->
<input type="number" name="third" value="" onclick="javascript:getValues()">
<!--runs the function to determine the largest number-->
<button type="button" onclick="determineLarge();">Determine the larger number</button>
<!--resets the form so user can insert different numbers-->
<input type="button" onclick="resetForm();" value="Reset the form" ></input>
</form>
<div id="results"> </div> Комментарии:
1. Спасибо. Я все еще учусь, как это сделать, но дополнительные разъяснения и причины, по которым у меня продолжали возникать проблемы, помогают мне понять, что я делал неправильно.
Ответ №2:
в вашем html-изменении
<form name="myForm" >
Для
<form id="myForm" >
этот код:
function myForm(){
document.getElementById("myForm").reset();
}
пытается сбросить форму с идентификатором myForm
, но не находит ее, вот почему
Комментарии:
1. Теперь, когда я запускаю программу, я получаю сообщение об ошибке, что document.myform не определен. Вы знаете почему?
2. @GaryKukat вы используете неправильный синтаксис для доступа к значению
document.myForm.first.value = first;, измените его, чтобыdocument.getElementByName("first").value = first;изменить такое изменение.3.
getElementByNameФункции нет; естьgetElementsByNameфункция, которая возвращает aNodeList. Но тогда вам нужно будет выполнить итерацию или получить определенный индекс.4. ошибка с моей стороны. предоставление полям определенных идентификаторов и доступ к ним с
document.getElementById("field_id").value = first;соответствующим вводом должны иметьid="field_id"
Ответ №3:
В качестве альтернативы изменению имени формы на идентификатор вы можете изменить свой селектор javascript.
document.forms.myform.reset();
Однако это просто сбросит вашу форму до любых значений, присутствующих при загрузке страницы, или которые установлены через .value = (как и предполагаемая функциональность .reset() ). Чтобы очистить все элементы, вам нужно будет перебрать элементы в вашей форме и вручную очистить их.
Приведенный ниже код сделает это, но, пожалуйста, обратите внимание, что это не будет работать для элементов checkbox / radio, вам потребуется дополнительная логика для их обработки.
var inputs = document.forms.myform.querySelectorAll('input,textarea');
for(var i = 0; i < inputs.length; i ) {
inputs[i].value = '';
}
getValues();
Комментарии:
1. это сбрасывает мою форму, но приводит к повторному появлению предыдущих введенных чисел и не запрашивает у пользователя новые числа.
2. @GaryKukat Как и предполагаемая функциональность
.reset()— я обновил свой пост, чтобы показать дополнительную логику, которая вам понадобится, чтобы фактически очистить вашу форму.
Ответ №4:
В этом коде есть несколько проблем, о которых писали здесь другие ребята. Основная проблема при нажатии на любые элементы ввода заключается в том, что переменные first second и third не очищаются. Поэтому, когда вы нажимаете на элементы, части кода ниже снова устанавливают значения.
document.myForm.first.value = first;
document.myForm.second.value = second;
document.myForm.third.value = third;