WordPress自定义HTML嵌入JavaScript代码出现NaN错误求助

我开发的电费计算工具代码在W3School编辑器中运行完全正常，但以自定义HTML形式嵌入WordPress平台后执行时出现NaN错误。

运行状态截图 #

• 代码在W3School编辑器正常运行：
  
• WordPress中运行时的错误：
  

完整代码 #

HTML部分 #

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

CSS部分 #

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%;
}

JavaScript部分 #

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>
            `;
}

问题原因排查 #

1. HTML转义导致JS语法错误 #

你提供的JS代码中存在&&和<=这类HTML转义字符，W3School编辑器会自动解析为正常的&&和<=，但WordPress的自定义HTML编辑器可能保留这些转义字符，导致JS逻辑判断语句语法错误，无法正确计算totalBill，最终出现NaN。

2. 元素ID冲突 #

WordPress主题或已安装的插件可能已使用units、lessThan200、tableBody这些通用ID，导致document.getElementById无法获取目标元素，parseFloat(null.value)返回NaN，后续所有依赖units的计算都会变成NaN。

3. JS执行时机问题 #

如果JS代码被放在页面头部，可能在DOM元素未渲染完成时就执行，此时document.getElementById('units')返回null，同样会导致units值为NaN。

4. WordPress安全过滤限制 #

WordPress的自定义HTML编辑器可能过滤模板字符串（`）这类语法，导致动态生成表格的代码失效，进而引发计算结果无法正常渲染，同时间接导致计算逻辑出错。

修复方案 #

1. 修正JS中的转义字符：将JS代码中的&&替换为&&，<=替换为<=，确保逻辑判断语句语法正确。
2. 修改元素ID为唯一值：给所有元素ID添加专属前缀，比如将units改为electricity-calc-units，lessThan200改为electricity-calc-less200，避免和其他元素ID冲突。
3. 确保DOM加载完成后执行JS：将JS代码包裹在DOMContentLoaded事件监听中，或者放在HTML内容底部：

document.addEventListener('DOMContentLoaded', function() {
  function calculateBill() {
    // 原计算逻辑
  }
  // 绑定按钮点击事件（替代onclick属性）
  document.getElementById('electricity-calc-btn').addEventListener('click', calculateBill);
});

4. 添加输入校验：在计算前判断units是否为有效数字，避免NaN进入计算流程：

const units = parseFloat(document.getElementById('electricity-calc-units').value);
if (isNaN(units) || units < 0) {
  alert('请输入有效的非负用电量数值');
  return;
}

5. 替换模板字符串：如果WordPress过滤了模板字符串，改用字符串拼接生成表格HTML：

let tableHTML = '<tr><td>Cost of electricity (' + units + ' x ' + perUnit + ')</td><td>' + (units * perUnit).toFixed(2) + '</td></tr>';
// 依次拼接其他行...
tableBody.innerHTML = tableHTML;

内容的提问来源于stack exchange，提问作者Umer Rashid