Question

我正在开发一个新的安全评估网页，我正在使用HTML和Java Script。由于某种原因，代码无法正常工作，无法获得所需的结果。页面应该工作的方式是让用户回答是或否问题，当用户完成后，他们可以单击提交。然后页面会显示回答是的问题数量，但是当我点击提交时，我得到的唯一结果是0。

任何帮助都会受到赞赏。

谢谢，

<script>
    function calcscore() {
        var score = 0;
        $(".calc:checked").each(function() {
            score += parseInt($(this).val(), 10);
        });
        $("input[name=sum]").val(score)
    }
    $().ready(function() {
        $(".calc").change(function() {
            calcscore()

        });
    });


    window.sumInputs = function() {
        var inputs = document.getElementsByTagName('calc'),
            result = document.getElementById('total'),
            sum = 0;

        for (var i = 0; i < inputs.length; i++) {
            var ip = inputs[i];

            if (ip.class && ip.class.indexOf("total") < 0) {
                sum += parseInt(ip.value) || 0;
            }

        }

        result.value = sum;
    }
</script>

<!DOCTYPE html>
<html>

<body>

    <h1>Security Assessment </h1>

    <table>
        <tr>
            <th>PERSONNEL SECURITY</th>

        </tr>
        <tr>
            <td>1. Does your staff wear ID badges?

                <form>
                    Yes
                    <input class="calc" type="radio" name="radio1" value="1" /> No
                    <input class="calc" type="radio" name="radio1" value="0" /><br />

                </form>


            </td>


        </tr>
        <tr>
            <td>2. Is a current picture part of the ID badge?


                <form>
                    Yes
                    <input class="calc" type="radio" name="radio2" value="1" /> No
                    <input class="calc" type="radio" name="radio2" value="0" /><br />

                </form>


            </td>


        </tr>
        <tr>
            <td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge?

                <form>
                    Yes
                    <input class="calc" type="radio" name="radio3" value="1" /> No
                    <input class="calc" type="radio" name="radio3" value="0" /><br />

                </form>

            </td>

        </tr>


    </table>

    Total : <input type="text" name="total" id="total" />


    <a href="javascript:sumInputs()"><input type="Submit" value="Submit"</a>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>

</html>

Answer 1

您需要在代码中修复一些内容。不要将提交输入包装在一个。然后，如果你想选择使用'calc'类，你需要使用'.calc'。然后你可以从提交按钮的onclick事件中调用sumInputs（）。要更改文字输入中的值，您可以使用$('#total').val(sum)

    function calcscore()
{
    var score = 0;
    $(".calc:checked").each(function()
{
        score+=parseInt($(this).val(),10);
}    );
    $("input[name=sum]").val(score)
}
	$().ready(function()
{
    $(".calc").change(function()
{
        calcscore()

}    );
}    );


   window.sumInputs = function() {
    var inputs = $('.calc:checked'),
        result = document.getElementById('total'),
        sum = 0;            

    for(var i=0; i<inputs.length; i++) {
        sum += parseInt(inputs[i].value);
    }
    
    $('#total').val(sum);
}

<!DOCTYPE html>
<html>
		<body>

		<h1>Security Assessment </h1>

	<table>
  <tr>
    <th>PERSONNEL SECURITY</th>
   
  </tr>
  <tr>
    <td>1. Does your staff wear ID badges? 

<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" />
No
<input class="calc" type="radio" name="radio1" value="0" /><br />

</form> 


 </td>

   
  </tr>
  <tr>
    <td>2. Is a current picture part of the ID badge? 


<form>
Yes
<input class="calc" type="radio" name="radio2" value="1" />
No
<input class="calc" type="radio" name="radio2" value="0" /><br />

</form> 


</td>
    
    
  </tr>
  <tr>
    <td>3. Are authorized access levels and type (employee, contractor, visitor) identified
on the Badge?

<form>
 Yes
<input class="calc" type="radio" name="radio3" value="1" />
No
<input class="calc" type="radio" name="radio3" value="0" /><br />

</form> 

</td>
      
  </tr>
 
 
</table>

Total : <input type="text" name="total" id="total"/>


<input type="Submit" value="Submit" onclick="sumInputs()">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>
</html>

Html和Javascript没有得到预期的答案

1 个答案: