有没有一种方法可以将商品价格分配给Javascript中的变量？

我对JavaScript的了解很少，因此，感谢您对此查询的帮助。

我正在学习Liquid，并使用Shopify制作一种财务计算器；我想将产品价格分配为JavaScript中的变量，因此当用户更改还款月数时，它将动态更改数据。

我已经从模板复制了大多数JavaScript。

目前，我只是使用html上的价格输入价格，但是我想知道是否有办法为屏幕上的文本分配一个javascript变量。

例如，我可以通过添加以下内容来显示产品价格：

<p>{{ price}}</p>

但是当我尝试制作一个JavaScript变量时，它是：

var amount = document.getElementById("amount");

它不会拖延任何事情。

我希望变量“金额”等于产品价格。

我的代码是...

Java脚本

<script type="text/javascript">
function calculate() {
  //Look up the input and output elements in the document
  var amount = document.getElementById("amount");
  var period = document.getElementById("period");
  var payment = document.getElementById("payment");
  var total = document.getElementById("total");
  var financecost = document.getElementById("financecost");
  var deposit = document.getElementById("deposit");
  var hireweekly = document.getElementById("hireweekly");

  var principal = amount.value - deposit.value;
  var interest = principal / 100 * 5.43;
  var payments = parseFloat(period.value);

// compute the monthly payment figure
var monthly = principal / period.value;

  if (isFinite(monthly)){
    payment.innerHTML = monthly.toFixed(2);
    total.innerHTML = (principal + interest).toFixed(2);
    financecost.innerHTML = (principal + interest - principal).toFixed(2);
    hireweekly.innerHTML = (monthly / 4.34524).toFixed(2);

// Save the user's input so we can restore it the next time they visit
 save(amount.value, period.value);

 // Advertise: find and display local lenders, but ignore network errors
 try { // Catch any errors that occur within these curly braces
 getLenders(amount.value, period.value);
 }

  catch(e) { /* And ignore those errors */ }
 // Finally, chart loan balance, and interest and equity payments
 chart(principal, interest, monthly, payments, hireweekly);
 }
 else {
 // Result was Not-a-Number or infinite, which means the input was
 // incomplete or invalid. Clear any previously displayed output.
 hireweekly.innerHTML = "";
 payment.innerHTML = ""; // Erase the content of these elements
 total.innerHTML = ""
 financecost.innerHTML = "";
 chart(); // With no arguments, clears the chart
 }
}
</script>

的HTML

<table class="finance-calculator-table" width="100%">
  <tbody class="finance-calculator-table--body">
    <tr class="table-row-alternate-2"><td><p>Vehcle Price (£)</p></td>
      <td>
        <input class="finance-calculator--input" id="amount" onchange="calculate();" placeholder="Enter the vehicle amount"></td>
    </tr>
    <!--<tr><td>Annual interest (%):</td> <td><input id="apr" onchange="calculate();"></td></tr>-->
    <tr class="table-row-alternate-1"><td><p>Period (years)</p></td>
      <td>
        <select class="finance-calculator--select" id="period" onchange="calculate();">
          <option value="12">12 Months</option>
          <option value="24">24 Months</option>
          <option value="36">36 Months</option>
          <option value="48">48 Months</option>
          <option value="60">60 Months</option>
          <option value="72">72 Months</option>
          <option value="84">84 Months</option>
        </select>
      </td>
    <tr class="table-row-alternate-2" width="100%">
      <td><p>Deposit (£)</p></td>
      <td>
        <input class="finance-calculator--input" id="deposit" onchange="calculate();" placeholder="Enter an amount">
      </td>
    </tr>
    <tr class="table-row-alternate-1">
      <td><p>Weekly Payments</p></td>
      <td>£<span class="output" id="hireweekly"></span></td>
    </tr>
    <tr class="table-row-alternate-2">
      <td><p>Monthly Payments</p></td>
      <td>£<span class="output" id="payment"></span></td>
    </tr>
    <tr class="table-row-alternate-1">
      <td><p>Total Payment</p></td>
      <td>£<span class="output" id="total"></span></td>
    </tr>
    <tr class="table-row-alternate-2">
      <td><p>Finance Cost</p></td>
      <td>£<span class="output" id="financecost"></span></td>
    </tr>
  <tbody>
</table>