Multiple Two Drop Down Boxes onclick without append

Question

this my first attempt at javascript and first post here. I'm trying to display the result of a simple multiplication of values from two drop down boxes. So user selects one value from each, hits the button and gets A*B. It is working how I have it but if they change their answer and try and submit a new number then the second result appends to the first result. I for the life of me cannot get the field to reset. I have tried .replaceWith(result) instead of .append(result) which solves that problem but then the user cannot make the second selection at all.

Any help greatly appreciated! Also, would love to know if it can output with a comma as a thousand separator.

      <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

You are doing great. Just hide previous result before showing new result and use html to show result.

 <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

Here is your javascript code.

`$(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

Try this:

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

use this syntax before assigning value to the result element.