多個兩個下拉框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>

Answer 2

這是您的JavaScript代碼。

`$(document).ready(function(){ 
     $("select").change(function(){
        var n1=$('#box1').val();
        var n2=$('#box2').val();
        var result=Math.round(n1*n2 /52);
        if(!isNaN(result))
            $("#result2").text(result);
     });
});`

Answer 3

嘗試這個：

$('#result2').text('');

在將值分配給result元素之前使用此語法。