每次使用jQuery重置输入框字段

Question

每次我提交输入文本值时，我都会在字符串中得到总结果值：对于20 + 20，我会得到'2020'，但对于一次点击我得到了正确的数字答案;我怎样才能避免这种情况并找回正确答案？

下图是显示当前结果的图像：

function sendInveMess() {}
$(document).ready(function() {
  $("#result_display").click(function() {

    var result = $('#paper1_internals').val();
    var result2 = $('#paper1_externals').val();
    var res = parseInt(result) + parseInt(result2);
    var result_add = $("#paper1_total").append(res);

    var result3 = $('#paper2_internals').val();
    var result4 = $('#paper2_externals').val();
    var res2 = parseInt(result3) + parseInt(result4);
    var result_add2 = $("#paper2_total").append(res2);

    var result5 = $('#paper3_internals').val();
    var result6 = $('#paper3_externals').val();
    var res3 = parseInt(result5) + parseInt(result6);
    var result_add3 = $("#paper3_total").append(res3);

    var result7 = $('#paper4_internals').val();
    var result8 = $('#paper4_externals').val();
    var res4 = parseInt(result7) + parseInt(result8);
    var result_add4 = $("#paper4_total").append(res4);

    var grand_total_cal = parseInt(res) + parseInt(res2) + parseInt(res3) + parseInt(res4);
    var grand_value = $("#grand_tot").append(grand_total_cal);

    var perc_cal = (((parseFloat(res) + parseFloat(res2) + parseFloat(res3) + parseFloat(res4)) / 600) * 100).toFixed(2);
    $("#marks_percentile").append(perc_cal).append("%");
    if (perc_cal <= 50) {
      $("#class_rate").append("fail");
    } else if (perc_cal >= 60) {
      $("#class_rate").append("first classs");
    } else if (perc_cal >= 70) {
      $("#class_rate").append("first classs with distiction");
    }

  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Subject</th>
    <th>Internals</th>
    <th>Externals</th>
    <th class="total">Total</th>
  </tr>
  <tr>
    <th>Paper 1</th>
    <td><input id="paper1_internals" type="text" name="paper1_internals"></td>
    <td><input id="paper1_externals" type="text" name="paper1_externals"></td>
    <td id="paper1_total" class="result"><span></span></td>
  </tr>
  <tr>
    <td class="width_large" colspan="2">
      <div id="grand_tot">Grand Total = </div>
    </td>
    <td class="width_large" colspan="2">
      <div id="marks_percentile">Total Percentile = <span></span></div>
    </td>
  </tr>
  <tr class="border_less">
    <td class="width_full">
      <div id="class_rate" class="width_large grade"></div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit" value="Submit" id="result_display" onclick="return sendInveMess();" />
    </td>
  </tr>
</table>

Answer 1

工作示例：

  
$(document).ready(function(){  
        $("#result_display").click(function(){
        
          let tableRes        = {}
            , grand_total_cal = 0
            , perc_cal        = 0.0
            , i               = 1
            , rows_count      = 2 ;
        
          for( ; i <= rows_count ; ++i )
          {
            tableRes[i] = {
                prefix: "#paper"+i
              , int: null
              , ext: null
              , res: null
              , add: null // ???
            }
        
            // For convenience
            tres = tableRes[i] ;
        
            // Get values
            for(from of ['int', 'ext']) {
              tres[from] = $(tres.prefix + '_' + from + 'ernals').val();
            }
          
            // Calc res
            tres.res = parseInt(tres.int) + parseInt(tres.ext);
        
            // Add res (???)
            tres.add = $(tres.prefix + '_total').text(tres.res);
  
            // Increment total and percents
            grand_total_cal += tres.res ;
            perc_cal        += parseFloat(tres.res) ;
          }
  

          
          // Calc final percent
          perc_cal = ( ( perc_cal/600 ) * 100 ).toFixed(2) ;
        
          // Display the results
          var grand_value = $("#grand_tot").text(grand_total_cal) ; 
          $( "#marks_percentile" ).text(perc_cal).append("%"); 
        
         $("#class_rate").text(function(perc){
           if      (perc > 69){ return "first classs with distiction";}
           else if (perc > 59){ return "first classs";} 
           else               { return "fail"; }
           }(perc_cal))
       })
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <tr>
            <th>Subject</th>
            <th>Internals</th>
            <th>Externals</th>
            <th class="total">Total</th>
        </tr>
        <tr>
            <th>Paper 1</th>
            <td><input id="paper1_internals" type="text" name="paper1_internals"></td>
            <td><input  id="paper1_externals" type="text" name="paper1_externals"></td>
            <td id="paper1_total" class="result"><span></span></td>
        </tr>
        <tr>
            <th>Paper 2</th>
            <td><input id="paper2_internals" type="text" name="paper2_internals"></td>
            <td><input  id="paper2_externals" type="text" name="paper2_externals"></td>
            <td id="paper2_total" class="result"><span></span></td>
        </tr>
        <tr>
            <td class="width_large">
        <div id="grand_tot">Grand Total = </div>
                </td>
            <td class="width_large">
        <div id="marks_percentile">Total Percentile = <span></span></div>
                </td>
        </tr>
          <tr class="border_less">
              <td class="width_full">
                <div id="class_rate" class="width_large grade"></div>
              </td>
            </tr>
            <tr>
            <td>
            <input type="submit" value="Submit" id="result_display" />
            </td>
        </tr>
    </table>

Answer 2

您正在使用追加，您需要在插入文本之前清除

如果它是跨度

，则更改innerHtml

Answer 3

追加将文本添加到现有值。您应该使用.val(res)来设置结果值。 试试吧。它会在您每次提交时更新值

var result = $('#paper1_internals').val();
var result2 = $('#paper1_externals').val();                
var res = parseInt(result) + parseInt(result2);            
$("#paper1_total").val(res);
var result_add = $("#paper1_total").val();

同样适用于其他文本框组合。