有没有办法将产品价格分配给 Javascript 中的变量？

Question

我对 JavaScript 了解甚少，因此我将不胜感激有关此查询的任何帮助。

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

我从模板中复制了大部分 JavaScript。

目前，我只是在 html 上输入价格，但我想知道是否有办法将 javascript 变量分配给屏幕上的文本。

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

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

但是当我尝试制作一个javascript变量时：

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

它不会拉任何东西。

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

我的代码是...

Javascript

<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>

Answer 1

盯着错误看，这个语句没有返回任何值，因为没有 ID 为 amount 的元素。

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

在MDN Documentation 上阅读有关 ID 的更多信息，例如如何在 HTML 中定义它们，然后在 JavaScript 中通过它们的 ID 获取元素。

话虽如此，您的问题有两种可能的解决方案。

1. 通过 Liquid 输出到 JS 变量
2. 将 ID 添加到 HTML 标记和 getElementById

要通过 Liquid 直接输出到 JS 变量，在您的 Liquid 文件的某处，您可以执行类似的操作，然后在 JavaScript 中，您将在 productPrice 变量中获得产品价格。

<script>
    var productPrice = {{ product.price}}
</script>

您还可以将 ID 添加到您的标记中，例如，

<p id="amount">{{ price}}</p>

然后在 JavaScript 中

// to get amount
var amount = document.getElementById("amount").innerText;

现在，您应该知道一些要使其与 Shopify 一起使用的事情是..

{{amount}} 变量并非在所有模板上都可用。所以请确保您相应地使用它。

{{amount}} 将返回以美分为单位的价格，因此请在计算中注意这一点。

Shopify Product Object Docs

Shopify Money Filters

Answer 2

也许可以试试：

amount = document.getElementById('amount').value;