Javascript - Update Input Fields (Not doing anything)

Hello,

I am trying to add dynamic price calculations to a webflow form but am having some problems with my latest change. The code was working perfectly (in jsbin) when calculating and updating html labels but now that I want to update form inputs instead it does not do anything.

I have 4 inputs below:

    <div class="priceblock w-clearfix" id="PriceBlock">
      <h4>Payment Due</h4>
      <input class="readonlyprices text-field w-input" data-name="ClassPricePerWeek" id="ClassPricePerWeek" maxlength="256" name="ClassPricePerWeek" placeholder="Cost per week:" type="text">
      <input class="readonlyprices text-field w-input" data-name="SubTotal" id="SubTotal" maxlength="256" name="SubTotal" placeholder="Subtotal:" type="text">
      <input class="readonlyprices text-field w-input" data-name="Discount" id="Discount" maxlength="256" name="Discount" placeholder="Discount:" type="text">
      <input class="readonlyprices text-field w-input" data-name="TotalToPay" id="TotalToPay" maxlength="256" name="TotalToPay" placeholder="Total Cost:" type="text">
    </div>

which I am trying to update with document.getElementById("Discount").value

Is there issues with the javascript? (it does not error)
(Can’t embed jsbin so here is jsfiddle)

https://preview.webflow.com/preview/total-spanish-simple?preview=5110d9e626390984b4d3d269b671124d
Page: Booking And Payment

hmm after playing with the code for another part of the site I have noticed that
onclick=“calculateTotal()” had gone missing as I handcoded into the exported html

I can not get onclick attribute working for some reason. it says its reserved.
What do I need to do?