如何修改给定代码将计算结果变量显示在input元素而非span元素中

嘿，这个修改其实很简单，不过先得注意一个小问题——你的HTML里<div>和<input>都用了id="result"，ID在页面中必须是唯一的，不然DOM选择器会出现混乱，找不到正确的元素。咱们一步步来调整：

步骤1：修正重复的ID #

把input元素的id改成一个唯一值，比如total-input，这样JS能精准定位到它：

<div class="result d-flex justify-content-center md-auto" id="result">
  <!-- 如果你不需要这个span了，可以直接删掉 -->
  <span>18900</span> руб.
  <input type="text" id="total-input" value="18900">
</div>

步骤2：修改JavaScript的结果赋值逻辑 #

原来的代码是把计算好的summ赋值给span的文本，现在改成赋值给input的value属性，用jQuery的val()方法就行：

$(function(){
  $('#main input:radio').on("change", function(){
    var summ = 18900;
    $('#main input:radio:checked').each(function(index, element){
      var add = parseInt($(element).val(), 10);
      if(!isNaN(add)) summ += add;
    });
    // 把原来操作span的代码改成操作input
    $("#total-input").val(summ);
  })
})

额外说明 #

• 如果你完全不需要原来的span元素了，可以直接从HTML里删掉它，不影响功能。
• 保持ID的唯一性是前端开发的基础规范，能避免很多奇怪的DOM选择问题哦。

内容的提问来源于stack exchange，提问作者Александр Макаров