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中定义ID，以及以后如何通过其ID在JavaScript中获取元素。

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

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

要通过Liquid在液体文件中的某个位置直接输出到JS变量，您可以执行以下操作，然后在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;

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

2 个答案: