时间戳

首页 > 解决方案 > 使用 javascript 创建输入表单

javascript - 使用 javascript 创建输入表单

问题描述

我有一个关于创建一个可以输入“等级”的表格的问题，该表格还可以检查这些等级是否在 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>

标签： javascriptformsvalidation

解决方案

取值textboxes并给出一个buttonget 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>

谢谢你。

推荐阅读