Создание формы ввода с использованием JavaScript - PullRequest
Новая
       5

Создание формы ввода с использованием JavaScript

0 голосов
/ 04 октября 2018

У меня был вопрос о создании формы, в которую я могу ввести «оценки», в которую также можно было бы проверить, были ли эти оценки от 0 до 25 или от 0 до 100 (проверка ввода).Мой код должен быть в JavaScript, но я не знаю, где и как начать.Другими словами, мне нужно взять этот код и добавить «форму» и проверить правильность ввода.Это то, что я до сих пор: 

<!doctype html>
<html>

<script>

var a1=parseFloat(prompt("Enter the grade for assignment 1: "));

var a2=parseFloat(prompt("Enter the grade for assignment 2: "));

var a3=parseFloat(prompt("Enter the grade for assignment 3: "));

var a4=parseFloat(prompt("Enter the grade for assignment 4: "));

var mid=parseFloat(prompt("Enter the grade for the mid exam: "));

var fe=parseFloat(prompt("Enter the grade for the final exam: "));

var fp=parseFloat(prompt("Enter the grade for the final project: "));

var sum;
var grade;
var error;
		
sum=((a1+a2+a3+a4)/4)*(4*0.25)+(mid*0.25)+(fe*0.25)+(fp*0.25);

	 /* if (a1 < 0 && a1 > 25) {
	error = window.prompt( "Assignments are only out of 25 points, please re-enter the integer grade:")

} */
	


if (sum >= 94.0) {
	grade = "A";
} else if (sum <= 94.0 && sum >= 90.0) {
	grade = "A-";
} else if (sum <= 90.0 && sum >= 87.0) {
	grade = "B+";
} else if (sum <= 86.9 && sum >= 84.0) {
	grade = "B";
} else if (sum <= 83.9 && sum >= 80.0) {
	grade = "B-";
} else if (sum <= 79.9 && sum >= 77.0) {
	grade = "C+";
} else if (sum <= 76.9 && sum >= 74.0) {
	grade = "C";
} else if (sum <= 73.9 && sum >= 70.0) {
	grade = "C-";
} else if (sum <= 69.9 && sum >= 67.0) {
	grade = "D+";
} else if (sum <= 66.9 && sum >= 64.0) {
	grade = "D";
} else if (sum <= 63.9 && sum >= 60.0) {
	grade = "D-";
} else if (sum <= 60.0) {
	grade = "F";
}


document.writeln("The final percent grade is "+sum+"%. Your grade letter is: "+grade+".");


	</script>
	
	
</html>

1 Ответ

0 голосов
/ 04 октября 2018

Возьмите значения из textboxes и дайте button get Results и отобразите результат в выходном div.

Вот как я это сделал.В javascript возьмите значения из текстовых полей с помощью document.getElementById("<ID>").value и сохраните их в переменной.Выполните один и тот же шаг для всех полей ввода.И обработайте значения, полученные из текстовых полей, и отобразите их при нажатии button.Вот простой фрагмент кода, который делает то же самое, используя поля. 

function myFunction()
{
  var a1 = parseFloat(document.getElementById("a1").value);
  var a2 = parseFloat(document.getElementById("a2").value);
  var a3 = parseFloat(document.getElementById("a3").value);
  var a4 = parseFloat(document.getElementById("a4").value);

  var mid = parseFloat(document.getElementById("mid").value);
  var fe = parseFloat(document.getElementById("fe").value);
  var fp = parseFloat(document.getElementById("fp").value);

  var sum=((a1+a2+a3+a4)/4)*(4*0.25)+(mid*0.25)+(fe*0.25)+(fp*0.25);
  var grade;

  if (sum >= 94.0) {
    grade = "A";
  } else if (sum <= 94.0 && sum >= 90.0) {
    grade = "A-";
  } else if (sum <= 90.0 && sum >= 87.0) {
    grade = "B+";
  } else if (sum <= 86.9 && sum >= 84.0) {
    grade = "B";
  } else if (sum <= 83.9 && sum >= 80.0) {
    grade = "B-";
  } else if (sum <= 79.9 && sum >= 77.0) {
    grade = "C+";
  } else if (sum <= 76.9 && sum >= 74.0) {
    grade = "C";
  } else if (sum <= 73.9 && sum >= 70.0) {
    grade = "C-";
  } else if (sum <= 69.9 && sum >= 67.0) {
    grade = "D+";
  } else if (sum <= 66.9 && sum >= 64.0) {
    grade = "D";
  } else if (sum <= 63.9 && sum >= 60.0) {
    grade = "D-";
  } else if (sum <= 60.0) {
    grade = "F";
  }
  
  document.getElementById("result").innerHTML = ("The final percent grade is "+sum+"%. Your grade letter is: "+grade+".");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
a1: <input type="text" id="a1"><br><br> 
a2: <input type="text" id="a2"><br><br>
a3: <input type="text" id="a3"><br><br>
a4: <input type="text" id="a4"><br><br>
  mid: <input type="text" id="mid"><br><br>
  finalexam: <input type="text" id="fe"><br><br>
  finalproject: <input type="text" id="fp"><br><br>
  
  <button onclick="myFunction()">Get Results</button><br><br>
  
  <span id="result"></span>
</body>
</html>

Спасибо.

...