我的计算器 function 不允许小数

Question

My calculator works fine with integers, it rejects a number with a decimal place ie 2.34.

Here is the full calculator with HTML and JS.

    <div class="module-border-wrap">
        <div class="module">
    <form id="main">
        <label for="rprice">Retail Price: </label>
        <input type="number" id="rprice" ><br><br>
        <label for="cogoods">Cost of Goods: </label>
        <input type="number" id="cogoods" ><br><br>        
        <input type="submit" value="Calculate">
    </form>
    </div>
        </div>
        <div id="display">
            <p> </p>
        </div>
    
<script>
    let retailPrice = document.getElementById("rprice");
    let costOfGoods = document.getElementById("cogoods");
    let form = document.getElementById("main");
form.addEventListener("submit",function(event){
    event.preventDefault();
    console.log(calculate());
    document.getElementById("display").innerHTML = calculate();
});
function calculate (){
    let difference = retailPrice.value - costOfGoods.value
    return retailPrice.value / difference 
 };
</script>

Answer 1

 <form id=main> <input type=number step=0.01 placeholder="retail price" id=rprice /> <input type=number step=0.01 placeholder=cost id=cogoods /> <input type=submit /> </form> <div id=display></div> <script> let form = document.getElementById("main"); form.addEventListener("submit", function(event) { event.preventDefault(); console.log(calculate()); document.getElementById("display").innerHTML = calculate(); }); function calculate() { let retailPrice = document.getElementById("rprice"); let costOfGoods = document.getElementById("cogoods"); let difference = Number(retailPrice.value) - Number(costOfGoods.value) return retailPrice.value / difference }; </script>