js和表单的交互问题
想创建一个表单，根据学生成绩输出学生成绩等级，其中要运用js和html的内容。代码如下：
html>
<html>
<head>
<meta charset="utf-8">
head>
<script language="javascript" type="text/javascript">
function gradelevel(input){
var input;
var msgE=document.getElementById('msg');
var b;
score=Number(input)
// if (score == 60){
// document.write("成绩不及格！");
// } else{
// document.write("成绩及格！");
// }
b=score/10;
lint=Math.floor(b);
switch(lint){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msgE.innerHTML='成绩不及格！';
break;
case 6:
msgE.innerHTML='成绩及格！';
break;
case 7:
msgE.innerHTML='成绩中等！';
break;
case 8:
msgE.innerHTML='成绩良好!';
break;
case 9:
case 10:
msgE.innerHTML='成绩优秀！';
break;
}
}
function validate(){
return gradelevel();
}
script>
<body>
<p>请输入成绩：p>
<form action="SY3_1.html" method="get" onsubmit="return validate(document.getElementById(grade))" >
<input type="text" id="grade" value='' onblur="return validate(document.getElementById(grade))">
<button type="submit" >提交button>
<p>成绩等级为：p>
<span id="msg">span>
form>
body>
html>
运行结果及报错内容
输入成绩后，没有返回值。
我的解答思路和尝试过的方法
感觉是在JS变量 的那块出现了问题，但具体的也不太清楚
我想要达到的结果
在点击“提交”按钮后，可以在最后一栏出现成绩等级的结果。
把方法给你改了一下，主要是input不从外面传进来了，直接在方法中获取，见以下代码：
function gradelevel(){
var msgE=document.getElementById('msg');
var input = document.getElementById('grade').value;
var b;
score=Number(input)
// if (score == 60){
// document.write("成绩不及格！");
// } else{
// document.write("成绩及格！");
// }
b=score/10;
lint=Math.floor(b);
switch(lint){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msgE.innerHTML='成绩不及格！';
break;
case 6:
msgE.innerHTML='成绩及格！';
break;
case 7:
msgE.innerHTML='成绩中等！';
break;
case 8:
msgE.innerHTML='成绩良好!';
break;
case 9:
case 10:
msgE.innerHTML='成绩优秀！';
break;
}
}
你上面那个var input多余了，直接调用就行了，如果你想要对其进行数据操作，可以用一个值接收它(var score=input)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script language="javascript" type="text/javascript">
function gradelevel(input){
var input;
var msgE=document.getElementById('msg');
var b;
score=Number(input.value)
// if (score == 60){
// document.write("成绩不及格！");
// } else{
// document.write("成绩及格！");
// }
b=score/10;
lint=Math.floor(b);
switch(lint){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msgE.innerHTML='成绩不及格！';
break;
case 6:
msgE.innerHTML='成绩及格！';
break;
case 7:
msgE.innerHTML='成绩中等！';
break;
case 8:
msgE.innerHTML='成绩良好!';
break;
case 9:
case 10:
msgE.innerHTML='成绩优秀！';
break;
}
}
function validate(input){
return gradelevel(input);
}
</script>
<body>
<p>请输入成绩：</p>
<form action="javascript:void(0)" method="get" onsubmit="return validate(document.getElementById('grade'))" >
<input type="text" id="grade" value='' onblur="return validate(document.getElementById('grade'))">
<button type="submit" >提交</button>
<p>成绩等级为：</p>
<span id="msg"></span>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script language="javascript" type="text/javascript">
function gradelevel(obj){
var input=obj.value;
var msgE=document.getElementById('msg');
var b;
score=Number(input)
// if (score == 60){
// document.write("成绩不及格！");
// } else{
// document.write("成绩及格！");
// }
b=score/10;
lint=Math.floor(b);
switch(lint){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msgE.innerHTML='成绩不及格！';
break;
case 6:
msgE.innerHTML='成绩及格！';
break;
case 7:
msgE.innerHTML='成绩中等！';
break;
case 8:
msgE.innerHTML='成绩良好!';
break;
case 9:
case 10:
msgE.innerHTML='成绩优秀！';
break;
}
}
function validate(obj){
console.log(obj.value)
return gradelevel(obj);
}
</script>
<body>
<p>请输入成绩：</p>
<form action="SY3_1.html" method="get" >
<input type="text" id="grade" value='' onblur="validate(this)">
<button type="submit" >提交</button>
<p>成绩等级为：</p>
<span id="msg"></span>
</form>
</body>
</html>
下次写js的时候放在html下面，不然容易读不出变量，还有就是当js报错之后，下面的页面就不渲染了，你可以看下这个思路，还有就是from具有提交的功能，如果不想提交跳转，可以进行阻止下浏览器的默认事件，也可以去掉from
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>请输入成绩：</p>
<input type="text" id="grade" value=''>
<button onclick="gradelevel()">提交</button>
<p>成绩等级为：</p>
<span id="msg"></span>
</body>
<script language="javascript" type="text/javascript">
var inp,msg
(() =>{
inp = document.getElementById('grade');
msg = document.getElementById('msg');
})()
function gradelevel(){
let scroll=Math.floor(Number(inp.value)/10)
switch(scroll){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msg.innerHTML='成绩不及格！';
break;
case 6:
msg.innerHTML='成绩及格！';
break;
case 7:
msg.innerHTML='成绩中等！';
break;
case 8:
msg.innerHTML='成绩良好!';
break;
case 9:
case 10:
msg.innerHTML='成绩优秀！';
break;
}
}
</script>
</html>
```
你的代码有好几处问题，
function validate(){
return gradelevel();
}
首先是这个函数validate没有传递个gradelevel，所以你gradelevel里面的input是没有值的，其次就算你都传值了，你下面的代码：
return validate(document.getElementById(grade)) 这个也只是传递了一个document.getElementById(grade)表单对象进去，并不是传表单的值进去，所以也是没有值的
下面是我改以后的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script language="javascript" type="text/javascript">
function gradelevel(){
var input=document.getElementById('grade').value;
var msgE=document.getElementById('msg');
var b;
score=Number(input)
b=score/10;
lint=Math.floor(b);
switch(lint){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msgE.innerHTML='成绩不及格！';
break;
case 6:
msgE.innerHTML='成绩及格！';
break;
case 7:
msgE.innerHTML='成绩中等！';
break;
case 8:
msgE.innerHTML='成绩良好!';
break;
case 9:
case 10:
msgE.innerHTML='成绩优秀！';
break;
}
}
function validate(){
gradelevel();
return false;
}
</script>
<body>
<p>请输入成绩：</p>
<form method="get" onsubmit="return validate()" >
<input type="text" id="grade" value='' onblur="validate()">
<button type="submit" >提交</button>
<p>成绩等级为：</p>
<span id="msg"></span>
</form>
</body>
</html>
validate 传入参数需要取得id的value值，
validate(document.getElementById('grade').value)
js的validate方法需要接收该参数并同步给gradelevel
function validate(input){
return gradelevel(input);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script language="javascript" type="text/javascript">
function gradelevel(input){
var msgE=document.getElementById('msg');
var b;
score=Number(input)
// if (score == 60){
// document.write("成绩不及格！");
// } else{
// document.write("成绩及格！");
// }
console.log(score);
b=score/10;
lint=Math.floor(b);
switch(lint){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msgE.innerHTML='成绩不及格！';
break;
case 6:
msgE.innerHTML='成绩及格！';
break;
case 7:
msgE.innerHTML='成绩中等！';
break;
case 8:
msgE.innerHTML='成绩良好!';
break;
case 9:
case 10:
msgE.innerHTML='成绩优秀！';
break;
}
}
function validate(e){
// 获取元素的value
return gradelevel(e.value);
}
</script>
<body>
<p>请输入成绩：</p>
<!-- 通过id获取需要加引号 document.getElementById('grade')-->
<form action="SY3_1.html" method="get" onsubmit="return validate(document.getElementById('grade'))" >
<input type="text" id="grade" value='' onblur="return validate(document.getElementById('grade'))">
<button type="submit" >提交</button>
<p>成绩等级为：</p>
<span id="msg"></span>
</form>
</body>
</html>
那个var input多余了
- 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7520915
如果你不提交给后台，可以把form去掉，如果要提交则在后台处理完输出结果。
这是前端处理的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>请输入成绩：</p>
<input type="text" id="grade" value='' onblur="gradelevel();">
<button type="button" onclick="gradelevel();">提交</button>
<p>成绩等级为：</p>
<span id="msg"></span>
</body>
</html>
<script language="javascript" type="text/javascript">
function gradelevel() {
var msgE = document.getElementById('msg');
var score = document.getElementById('grade').value;
if (score == '') {
msgE.innerHTML = '<span style="color:red;">成绩不可为空</span>';
return;
}
score = parseFloat(score) / 10;
lint = Math.floor(score);
if (isNaN(score) || score < 0 || score > 10)
msgE.innerHTML = '成绩区间错误，请输入0~100之间的数值！';
else if (lint < 6)
msgE.innerHTML = '成绩不及格！';
else if (lint < 7)
msgE.innerHTML = '成绩及格！';
else if (lint < 8)
msgE.innerHTML = '成绩中等！';
else if (lint < 9)
msgE.innerHTML = '成绩良好!';
else
msgE.innerHTML = '成绩优秀！';
}
</script>
代码稍作优化了下，有说明注释，望采纳！！
form表单自身带有提交功能，按钮也可以绑定，输入框失去焦点事件也可以调用方法，也就是说贴主调用了三次。form表单也带有自身跳转页面的功能。这点对于初学者有点绕，以后用到框架就不会接触这种表单提交了，所以莫慌~。另外贴主平时注意下代码结构，js代码一般放下面，css放最上面。这是因为html文件是先加载完成的。也可以下载一些插件用于自动格式化代码。互关下，有问题私信我。优化后代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>请输入成绩：</p>
<!-- #阻止表单提交 -->
<form action="#">
<input type="text" id="grade" />
<!-- 点击提交调用提交方法，传参为输入框的数值 -->
<button
onclick="return (gradelevel(document.getElementById('grade').value))"
>
提交
</button>
<p>成绩等级为：</p>
<span id="msg"></span>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function gradelevel(input) {
var msgE = document.getElementById("msg");
var lint = Math.floor(Number(input) / 10);
switch (lint) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
msgE.innerHTML = "成绩不及格！";
break;
case 6:
msgE.innerHTML = "成绩及格！";
break;
case 7:
msgE.innerHTML = "成绩中等！";
break;
case 8:
msgE.innerHTML = "成绩良好!";
break;
case 9:
case 10:
msgE.innerHTML = "成绩优秀！";
break;
}
}
</script>