我在 WordPress 自定义 HTML 上遇到 NaN 错误

Question

当我在代码编辑器中执行代码时，我的代码运行良好，但当在 WordPress 中执行代码时，代码运行不佳，出现 NaN 错误。

代码在 w3school 代码编辑器上运行良好

当它在 WordPress 上运行代码时，会出现以下错误：

function calculateBill() {
  const units = parseFloat(document.getElementById('units').value);
  const lessThan200 = document.getElementById('lessThan200').checked;

  // Rates
  const perUnit = 50;
  const fcSurcharge = 0.43;
  const electricityDuty = 0.20;
  const tvFee = 35;
  const gst = 2.40;
  const njSurcharge = 0.1;

  let totalBill = (perUnit + fcSurcharge + electricityDuty + gst + njSurcharge) * units + tvFee;
  if (lessThan200 && units <= 200) {
    totalBill *= 0.5; // Assuming 50% discount if less than 200 units for the last 6 months
  }

  const tableBody = document.getElementById('tableBody');
  tableBody.innerHTML = `
                <tr>
                    <td>Cost of electricity (${units} x ${perUnit})</td>
                    <td>${(units * perUnit).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>F.C Surcharge</td>
                    <td>${(fcSurcharge * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>Electricity Duty</td>
                    <td>${(electricityDuty * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>TV Fee</td>
                    <td>${tvFee.toFixed(2)}</td>
                </tr>
                <tr>
                    <td>GST</td>
                    <td>${(gst * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>N.J Surcharge</td>
                    <td>${(njSurcharge * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <th>Total Estimated Bill</th>
                    <th>${totalBill.toFixed(2)}</th>
                </tr>
            `;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f2f2f2;
}

.calculator {
  background-color: #fff;
  max-width: 100%;
  width: 450px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin: 50px auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
}

<div>
  <label for="units">Enter Units:</label>
  <input type="number" id="units" placeholder="E.g. 200">
  <br>
  <label>
            <input type="checkbox" id="lessThan200"> I am consuming 200 or less units for the last 6 months?
        </label>
  <br><br>
  <button onclick="calculateBill()">Calculate</button>

  <table>
    <tbody id="tableBody">
      <!-- Rows will be added here dynamically -->
    </tbody>
  </table>
</div>

Answer 1

正如 @CharlieSchliesser 在评论中指出的那样，如果输入为空，则可能会发生错误。解决这个问题最简单的方法是检查输入的数字实际上是数字还是 NaN。您可以使用

isNAN(units)

函数来做到这一点。然后，如果值是数字，则只需使用

!isNaN()

反转逻辑即可得到 true：

function calculateBill() {
  const units = parseFloat(document.getElementById('units').value);
  if (!isNaN(units)) {
    const lessThan200 = document.getElementById('lessThan200').checked;

    // Rates
    const perUnit = 50;
    const fcSurcharge = 0.43;
    const electricityDuty = 0.20;
    const tvFee = 35;
    const gst = 2.40;
    const njSurcharge = 0.1;

    let totalBill = (perUnit + fcSurcharge + electricityDuty + gst + njSurcharge) * units + tvFee;
    if (lessThan200 && units <= 200) {
      totalBill *= 0.5; // Assuming 50% discount if less than 200 units for the last 6 months
    }

    const tableBody = document.getElementById('tableBody');
    tableBody.innerHTML = `
                <tr>
                    <td>Cost of electricity (${units} x ${perUnit})</td>
                    <td>${(units * perUnit).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>F.C Surcharge</td>
                    <td>${(fcSurcharge * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>Electricity Duty</td>
                    <td>${(electricityDuty * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>TV Fee</td>
                    <td>${tvFee.toFixed(2)}</td>
                </tr>
                <tr>
                    <td>GST</td>
                    <td>${(gst * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <td>N.J Surcharge</td>
                    <td>${(njSurcharge * units).toFixed(2)}</td>
                </tr>
                <tr>
                    <th>Total Estimated Bill</th>
                    <th>${totalBill.toFixed(2)}</th>
                </tr>
            `;
  } else {
    // an error message logic should be included here
  }
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f2f2f2;
}

.calculator {
  background-color: #fff;
  max-width: 100%;
  width: 450px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin: 50px auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
}

<div>
  <label for="units">Enter Units:</label>
  <input type="number" id="units" placeholder="E.g. 200">
  <br>
  <label>
            <input type="checkbox" id="lessThan200"> I am consuming 200 or less units for the last 6 months?
        </label>
  <br><br>
  <button onclick="calculateBill()">Calculate</button>

  <table>
    <tbody id="tableBody">
      <!-- Rows will be added here dynamically -->
    </tbody>
  </table>
</div>