javascript - 多个两个下拉框 onclick 不附加

Question

这是我第一次尝试 javascript，也是在这里发表的第一篇文章。我试图显示两个下拉框中的值的简单相乘的结果。因此，用户从每个值中选择一个值，点击按钮并获得 A*B。它正在按我的方式工作，但如果他们更改答案并尝试提交新数字，那么第二个结果将附加到第一个结果。我一生都无法重置该字段。我尝试过使用 .replaceWith(result) 而不是 .append(result) 来解决该问题，但用户根本无法进行第二次选择。

非常感谢任何帮助!另外，很想知道它是否可以用逗号作为千位分隔符输出。

      <form name="myForm" id="myForm">
        <label>Select Amount</label>
        <select id="box1" type="select" oninput="calculate()" />
          <option value="choose" selected>Choose</option>
          <option value="15000">$15,000</option>
          <option value="20000">$20,000</option>
          <option value="25000">$25,000</option>
          <option value="30000">$30,000</option>
          <option value="35000">$35,000</option>
        </select>
        <label>Select Type</label>
          <select id="box2" type="select" oninput="calculate()" />
            <option value="x" selected>Choose</option>
            <option value=".21">1</option>
            <option value=".40">2</option>
          </select>
          <input class="button" type="submit" value="Submit" id="multiply">

        <p>
           <strong>here are the results:</strong> 
        </p>
        <h3>
            <strong>$<span id="result2"></span></strong> a week
        </h3>
      </form>

   <script>
   $(document).ready(function(){
   $('#multiply').click(function(event){


   event.preventDefault();
    var n1=$('#box1').val();
    var n2=$('#box2').val();
    var result=Math.round(n1*n2 /52);


    $('#resultholder2').fadeIn(200);
    $('#number1').append(n1);
    $('#number2').append(n2);
    $('#result2').append(result);
     });
     });
     </script>

Answer 1

你做得很好。只需在显示新结果之前隐藏以前的结果并使用 html 来显示结果即可。

 <script>
   $(document).ready(function(){
   $('#multiply').click(function(event){


   event.preventDefault();
    var n1=$('#box1').val();
    var n2=$('#box2').val();
    var result=Math.round(n1*n2 /52);
    $("#result2").hide();


    $('#resultholder2').fadeIn(200);
    $('#number1').append(n1);
    $('#number2').append(n2);
    $('#result2').html(result);
     });
     });
     </script>