求助：实现评分调查已填充输入框的总分计算（HTML/CSS/JS）

我正在构建一个评分调查，通过点击带预设值的按钮填充输入框，评分范围为5到-5。当前代码会填充每行两侧两个输入框中的一个，每行复用相同逻辑。现在需要将多行填充值求和得到最终总分，且部分行仅包含1至5或-1至-5的评分选项，恳请帮助。

解决步骤 #

• 新增总分展示区域，用于实时显示累加结果
• 编写calculateTotal函数，遍历所有评分输入框，将非空的数值转换为数字后累加
• 在changeValue函数末尾调用calculateTotal，每次点击评分按钮后自动更新总分
• 兼容仅含正向或负向评分的独立行

修改后的HTML #

<!-- 新增总分展示区域 -->
<div style="clear:both; padding:20px 0;">
  <strong>当前总分：</strong>
  <span id="totalScore">0</span>
</div>

<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input type="text" class="count-plus" value=""></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 5)" value="5"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 4)" value="4"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 3)" value="3"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 2)" value="2"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 1)" value="1"></td>
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input class="select-minus" type="button" onclick="changeValue(this, -1)" value="-1">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -2)" value="-2">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -3)" value="-3">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -4)" value="-4">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -5)" value="-5">
    <td><input type="text" class="count-minus" value="">
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input type="text" class="count-plus" value=""></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 5)" value="5"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 4)" value="4"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 3)" value="3"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 2)" value="2"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 1)" value="1"></td>
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input class="select-minus" type="button" onclick="changeValue(this, -1)" value="-1">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -2)" value="-2">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -3)" value="-3">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -4)" value="-4">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -5)" value="-5">
    <td><input type="text" class="count-minus" value="">
  </tr>
</table>
</div>
<!-- 示例：仅含正向评分的行 -->
<div style="display:block; float:left; width:50%; margin-top:20px;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input type="text" class="count-plus" value=""></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 5)" value="5"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 4)" value="4"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 3)" value="3"></td>
  </tr>
</table>
</div>
<!-- 示例：仅含负向评分的行 -->
<div style="display:block; float:left; width:50%; margin-top:20px;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input class="select-minus" type="button" onclick="changeValue(this, -3)" value="-3"></td>
    <td><input class="select-minus" type="button" onclick="changeValue(this, -2)" value="-2"></td>
    <td><input class="select-minus" type="button" onclick="changeValue(this, -1)" value="-1"></td>
    <td><input type="text" class="count-minus" value=""></td>
  </tr>
</table>
</div>

修改后的CSS #

<style>
    body {
        display:block; width:100%; height:100%; min-height:1000px; margin:0 auto; padding:0; background-color:#fff; top:0; left:0;
        }
    .select-plus {
        display:block;
        float:left;
        height:40px; width:40px; margin:0 2px; border-radius:50%; background-color:rgba(0,255,0,0.2); color:#000; font-size:.85rem; font-weight:400;
    }
    .select-minus {
        height:40px; width:40px; margin:0 2px; border-radius:50%; background-color:rgba(255,0,0,0.2); color:#000; font-size:.85rem; font-weight:400;
    }
    .count-plus, .count-minus {
        height:40px; width:40px; margin:0 auto; text-align:center; font-size:1.1rem; font-weight:700; border:0; border-bottom:3px solid #000;
    }
    .count-plus {
        display:block;
        float:left;
        margin-right:10px;
        background:none;
    }
    .count-minus {
        display:block;
        float:right;
        margin-left:10px;
        background:none;
    }
    .bizModelRatingTableLabel {
        padding:0;
    }
    label {
        text-align:left; font-size:1rem;
    }
    table.bizModelRatingTable tbody tr td {
        margin:0; padding:0;
    }
    /* 总分区域样式 */
    #totalScore {
        font-size:1.2rem;
        font-weight:bold;
        color:#2c3e50;
    }
</style>

修改后的JavaScript #

function changeValue(sender, value){
       var valueType1, valueType2, backgroundPlus, backgroundMinus, backgroundSelected, sibling, plusEls, minusEls;
       var row = sender.parentNode.parentNode;
       var parentDiv = row.closest('div');
       backgroundPlus = 'background-color:rgba(0,255,0,0.2);';
       backgroundMinus = 'background-color:rgba(255,0,0,0.2);';
       if (value > 0) {
           valueType1 = 'plus';
           valueType2 = 'minus';
           plusEls = row.querySelectorAll('.select-plus');
           // 处理仅含正向评分的行，避免找不到兄弟元素报错
           if(parentDiv.nextElementSibling){
               minusEls = parentDiv.nextElementSibling.querySelectorAll('.select-minus');
               sibling = parentDiv.nextElementSibling;
               sibling.querySelector(".count-" + valueType2).value = "";
           }
           backgroundSelected = 'background-color:rgba(0,255,0);';
       } else {
           valueType1 = 'minus';
           valueType2 = 'plus';
           minusEls = row.querySelectorAll('.select-minus');
           // 处理仅含负向评分的行，避免找不到兄弟元素报错
           if(parentDiv.previousElementSibling){
               plusEls = parentDiv.previousElementSibling.querySelectorAll('.select-plus');
               sibling = parentDiv.previousElementSibling;
               sibling.querySelector(".count-" + valueType2).value = "";
           }
           backgroundSelected = 'background-color:rgba(255,0,0); color:#fff;';
       }
       row.querySelector(".count-" + valueType1).value = 1*value;
       if(plusEls){
           plusEls.forEach(function(el) {
               el.style.cssText = backgroundPlus;
           });
       }
       if(minusEls){
           minusEls.forEach(function(el) {
               el.style.cssText = backgroundMinus;
           });
       }
       sender.style.cssText = backgroundSelected;
       // 每次更新评分后计算总分
       calculateTotal();
   }

// 计算总分函数
function calculateTotal(){
    let total = 0;
    // 获取所有评分输入框
    const scoreInputs = document.querySelectorAll('.count-plus, .count-minus');
    
    scoreInputs.forEach(input => {
        // 仅累加非空且有效的数值
        if(input.value.trim() !== "" && !isNaN(input.value)){
            total += Number(input.value);
        }
    });
    
    // 更新总分显示
    document.getElementById('totalScore').textContent = total;
}

内容的提问来源于stack exchange，提问作者alec1241