为何JavaScript代码在WordPress HTML区块编辑器发布后失效？预览正常

核心问题成因 #

1. HTML实体转义错误：你提供的代码中大量使用了<、"这类HTML实体编码，WordPress发布后未自动解码，导致HTML标签和JavaScript代码被当成纯文本，无法正常执行。
2. 页面结构冲突：直接嵌套完整的<html>/<head>/<body>标签，与WordPress自身的页面结构冲突，导致内容渲染异常。
3. 内联脚本被过滤：WordPress的安全机制或Generate Theme的设置可能禁用了内联onclick属性，导致按钮点击无响应。

修正步骤 #

1. 页面编辑器中添加核心内容 #

在WordPress页面编辑器（文本模式）中插入以下代码（去掉完整HTML结构，只保留功能核心）：

<div class="average-calculator-wrap">
    <h1>Average Grade Calculator</h1>

    <form id="inputForm">
        <table>
            <tr>
                <th>Grade</th>
                <th>Weight</th>
            </tr>
            <tr>
                <td><input type="number" id="grade1" step="0.01" placeholder="Assignment Grade"></td>
                <td><input type="number" id="weight1" placeholder="Assignment Weight"></td>
            </tr>
        </table>
        <button type="button" id="addRowBtn">Add Row</button>
        <button type="button" id="calculateBtn">Calculate</button>
    </form>

    <div id="resultBox">
        <p id="result"></p>
    </div>
</div>

2. 添加自定义样式 #

进入Generate Theme的自定义izer → Additional CSS，粘贴以下样式：

.average-calculator-wrap {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px 0;
    margin: 20px 0;
}
.average-calculator-wrap h1 {
    text-align: center;
    color: #333;
}
#inputForm {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 2px solid #333;
}
#inputForm table {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
}
#inputForm th, #inputForm td {
    padding: 10px;
    text-align: center;
}
#inputForm th {
    background-color: #333;
    color: #fff;
}
#inputForm input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#inputForm button {
    display: block;
    margin: 10px auto;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
#inputForm button:hover {
    background-color: #555;
}
#resultBox {
    max-width: 400px;
    margin: 20px auto 0;
    border: 2px solid #333;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: #fff;
}

3. 添加自定义脚本 #

使用Code Snippets插件或进入Generate Theme自定义izer的自定义JS区域，粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {
    let rowCount = 1;
    const addRowBtn = document.getElementById('addRowBtn');
    const calculateBtn = document.getElementById('calculateBtn');
    const table = document.querySelector('#inputForm table');
    const resultElement = document.getElementById('result');

    addRowBtn.addEventListener('click', function() {
        rowCount++;
        const newRow = table.insertRow(-1);

        const gradeCell = newRow.insertCell(0);
        gradeCell.innerHTML = `<input type="number" id="grade${rowCount}" step="0.01" placeholder="Assignment Grade">`;

        const weightCell = newRow.insertCell(1);
        weightCell.innerHTML = `<input type="number" id="weight${rowCount}" placeholder="Assignment Weight">`;
    });

    calculateBtn.addEventListener('click', function() {
        let sumGradeWeight = 0;
        let sumWeights = 0;

        for (let i = 1; i <= rowCount; i++) {
            const gradeInput = document.getElementById(`grade${i}`);
            const weightInput = document.getElementById(`weight${i}`);
            
            if (!gradeInput || !weightInput) continue;
            
            const grade = parseFloat(gradeInput.value);
            const weight = parseFloat(weightInput.value);

            if (!isNaN(grade) && !isNaN(weight)) {
                sumGradeWeight += grade * weight;
                sumWeights += weight;
            }
        }

        if (sumWeights !== 0) {
            const averageGrade = sumGradeWeight / sumWeights;
            resultElement.textContent = `Average Grade: ${averageGrade.toFixed(2)}`;
        } else {
            resultElement.textContent = "Please enter valid grade and weight values.";
        }
    });
});

内容的提问来源于stack exchange，提问作者Ashu Yadav