这个怎么通过class类来啊搞不懂class类


    <p>学&emsp;号:<input id="xh" type="text"></p>
        <p>姓&emsp;名:<input id="xm" type="text"></p>
        <p>mysql:<input id="ms" type="text"></p>
        <p>javascricp:<input id=js" type="text"></p>
        <p>

html部分不知道对不对哈对象没学明白
javascript 四个控件，输入id、name、语文分数数学分数。一个按钮，单击后计算两门课总分并输出学号、姓名不能为空值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
     
    <p>学&emsp;号:<input id="xh" type="text"></p>
    <p>姓&emsp;名:<input id="xm" type="text"></p>
    <p>语文分数: <input id="ms" type="text"></p>
    <p>数学分数:<input id="ss" type="text"></p>
   <button onclick="dianji()">点我一下</button>
    
    <script>

    function dianji(){
        
        var studentid=document.getElementById("xh").value
        var studentName=document.getElementById("xm").value
        var studentyuwen=document.getElementById("ms").value
        var studentshuxue=document.getElementById("ss").value
        var res=Number(studentyuwen) + Number(studentshuxue)


        window.alert('学生id是：'+studentid+',学生姓名是：'+studentName+',两科的分数总和是：'+res)
    }

   


    </script>


</body>
</html>

这样吗，望采纳

照着上一位回答者的改了下，如解决，请采纳他的答案


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>学&emsp;号:<input class="xh" type="text" /></p>
    <p>姓&emsp;名:<input class="xm" type="text" /></p>
    <p>语文分数: <input class="ms" type="text" /></p>
    <p>数学分数:<input class="ss" type="text" /></p>
    <button onclick="dianji()">点我一下</button>

    <script>
      function dianji() {
        var studentid = document.querySelector(".xh").value;
        var studentName = document.querySelector(".xm").value;
        var studentyuwen = document.querySelector(".ms").value;
        var studentshuxue = document.querySelector(".ss").value;
        var res = Number(studentyuwen) + Number(studentshuxue);

        window.alert(
          "学生id是：" +
            studentid +
            ",学生姓名是：" +
            studentName +
            ",两科的分数总和是：" +
            res
        );
      }
    </script>
  </body>
</html>