Javascript 在多个元素上管理“全部清除”功能

我有一个包含文本框和下拉菜单的表单

我有点麻烦管理一个clear all函数，它会将每个单独元素上的所有输入值重置为默认值

任何转向都将不胜感激

<h1>Weekly Pay Calculator</h1>




    <script>

        function myFunction() {

        var user = document.getElementById("user").value;
        var hours = document.getElementById("hours").value;
        var total = hours * 10;
        document.getElementById("result").innerHTML = user + " " + "£" + total + " " + "is your total pay for the shifts.";
        };


        function clearForm()
        {
            $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
            $(':checkbox, :radio').prop('checked', false);
        };


    </script>













    User ID <input type="text" id="user" maxlength="4" size="4"><br>


    <h3>Weekly Hours at (£10 per hour)</h3>

    <select id ="hours">
      <option value="">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>


    <br>


    <p>&nbsp;</p>


    <br>


    <p>&nbsp;</p>

    <input type="submit" value="Net Pay" onclick="myFunction()">
    <input type="submit" value="Clear Screen" onclick="clearForm()">

    <p>&nbsp;</p>

    <h4 id="result"></h4>

周薪计算器
函数myFunction（）{
var user=document.getElementById（“用户”）.value；
var hours=document.getElementById（“hours”）.value；
var总计=小时*10；
document.getElementById（“结果”）.innerHTML=user++“；”total++“是您的轮班工资总额。”；
};
函数clearForm（）
{
$（':input'）.not（':button，：submit，：reset，：hidden，：checkbox，：radio'）.val（''）；
$（'：复选框，：radio'）.prop（'checked'，false）；
};
用户ID

每周工作时间（每小时10英镑）
0
1.
2.
3.
4.
5.

如果它是一个实际的HTML

表单

元素，

重置

函数是一个不错的选择。可能的重复将它们放入一个

并调用（或者只使用一个

），我尝试将它们包装成一个表单，并调用大约109个不同的div。我不能让它工作