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

Question

我对 JavaScript 了解不多，所以如果您对此问题有任何帮助，我将不胜感激。

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

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

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

例如，我可以通过添加：

来显示产品价格

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

但是当我尝试创建一个 javascript 变量时：

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

它什么也拉不出来。

我希望变量 "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

也许试试：

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

Answer 2

从错误开始，此语句没有 return 任何值，因为没有 ID 为 amount.

的元素

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

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

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

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

要通过 Liquid 直接输出到 JS 变量，在你的 liquid 文件的某个地方，你可以做这样的事情然后在 JavaScript 你将在 productPrice[=44= 里面有产品价格]变量。

<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}} 将 return 以美分计价，因此请在计算时注意这一点。

Shopify Product Object Docs

Shopify Money Filters

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

Is there a way to assign a product price to a variable in Javascript?

html

javascript

liquid

shopify