ESP32网页按钮onclick报错：无法找到函数变量求助

以下是问题的核心原因及修复方案：

核心错误点 #

1. HTML结构无效
   原代码重复定义了<body>和</body>标签，将<script>放在第一个</body>之后，浏览器会忽略该位置的脚本，导致函数无法注册到全局作用域。

2. JavaScript语法致命错误
   所有函数中table_data直接赋值HTML代码时未加引号（如var table_data = <h1>Admin Settings</h1>...），违反JS语法规则，导致整个脚本解析失败，浏览器根本不会加载这些函数，点击按钮自然提示“无法找到变量”。

3. ESP32占位符未正确处理
   代码中的%s是C语言格式化占位符，需在ESP32发送网页前通过sprintf/snprintf替换为实际配置值，否则传到浏览器的JS代码会残留%s，引发语法错误。

修复后的完整代码 #

const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset='UTF-8'">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="refresh" content="500; url=/">
    <title>System Settings</title>
</head>
<body onload="show_admin()">
    <div class="banner">
        <h1>X Controller</h1>
    </div>
    <div class="split left">
        <div class="centered">
            <button onclick="show_admin()">Admin</button>
            <br/>
            <button onclick="show_wifi()">WIFI</button>
            <br/>
            <button onclick="show_tags()">Tags</button>
            <br/>
        </div>
    </div>
    <div class="split right">
        <div class="centered" id="showdata"></div>
    </div>

    <script> 
    // 注意：ESP32端需先将%s替换为实际配置值
    function show_admin() {
        var table_data = `
            <h1>Admin Settings</h1><br/>%s<br/>
            <form action="/ADMINSetting" method="POST">
                <table>
                    <tr>
                        <td> User Name </td> 
                        <td> <input type="text" name="UserName" placeholder="%s"></td>
                    </tr>
                    <tr>
                        <td> Password </td> 
                        <td> <input type="password" name="UserPass" placeholder="%s">
                    </td>
                </tr></table>
                <input type="submit" value="Update Admin Details">
            </form>
        `;
        document.getElementById("showdata").innerHTML = table_data;
    }

    function show_wifi() { 
        var table_data = `
            <h1>WIFI Settings</h1><br/>%s<br/>
            <form action="/WIFISetting" method="POST">
                <table>
                    <tr>
                        <td> SSID Network </td> 
                        <td> <input type="text" name="WifiSsid" placeholder="%s"></td>
                    </tr>
                    <tr>
                        <td> SSID Password </td> 
                        <td> <input type="password" name="SsidPass" placeholder="%s"></td>
                    </tr>
                </table>
                <input type="submit" value="Update Wifi Details">
            </form>
        `;
        document.getElementById("showdata").innerHTML = table_data;
    }

    function show_tags() { 
        let table_data = `
            <h1>Tag Settings</h1><br/>%s<br/>
            <form action="/DEVICESetting" method="POST">
                <table>
                    <tr>
                        <td> Access Tag 1 </td> 
                        <td> <input type="text" name="TAG1" placeholder="%s"></td>
                    </tr>
                    <tr>
                        <td> Access Tag 2 </td> 
                        <td> <input type="text" name="TAG2" placeholder="%s"></td>
                    </tr>
                    <tr>
                        <td> Cleaner Tag 1 </td> 
                        <td> <input type="text" name="CTAG1" placeholder="%s"></td>
                    </tr>
                </table>
                <input type="submit" value="Update BLE Tag Details">
            </form>
        `;
        document.getElementById("showdata").innerHTML = table_data;
    }
    </script>
</body>
</html>
)=====";

额外细节优化 #

• 将输入框type="String"改为标准的type="text"或type="password"（密码场景更安全）
• 用JS模板字符串（反引号`）包裹多行HTML代码，避免拼接错误
• 补充函数内的分号，完善JS语法规范
• 将<script>移至<body>末尾，确保DOM加载完成后脚本可正常解析

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