大三web前端，怎么将js和表单结合？

img


题目一，不知道如何将js运用到表单中，设置了onsubmit事件，但依旧失败

刚学时候先在案例实现再尝试添加到页面，不然内容多了不好排查问题。
可以在菜鸟教程在线修改代码去看看效果。
onsubmit参考：https://www.runoob.com/jsref/event-onsubmit.html

可以将代码拿出来看看


<!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');
            
            score=Number(input)
            if (score == 60){
                document.write("成绩不及格！");
            } else{
                document.write("成绩及格！");
            }
            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>

这个你看看


```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>

```