预处理器指令出现在嵌入原始字符串文字的 HTML 中

问题描述 投票：0回答：1

以下问题： 我正在为 ESP8266 创建一个网络界面。 Web 界面应向 ESP 发出 HTTP 请求，然后执行代码。我的问题是我在 JavaScript 代码中得到奇怪的预处理器信息

        let buttonHoldInterval;
        let speedMultiplier = document.getElementById('speed-slider').value;
        document.getElementById('speed-slider').addEventListener('change', function() {
            speedMultiplier = this.value;
            console.log('Speed multiplier set to ' + speedMultiplier);
            fetch('/set-speed/' + speedMultiplier);
        })
#line 94 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
function handleButtonHold(buttonId, message);
#line 105 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
function handleButtonClick(buttonId, message);
#line 94 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
        function handleButtonHold(buttonId, message) {
          document.getElementById(buttonId).addEventListener('mousedown', function() {
          console.log(message + ' button pressed');
          fetch('/' + buttonId + '/press');
        })

我故意在ino代码中不留空格：

const char* html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <style>

    </style>
</head>
<body>
    <div id="top-buttons">
    </div>
    <div id="controller">
        <div></div>
        <button id="forward">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
        </button>
        <div></div>
        <button id="left">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
        </button>
        <button id="backward">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
        </button>
        <button id="right">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
        </button>
        <button id="light-front">Light Front</button>
        <button id="light-back">Light Back</button>
        <button id="horn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"/></svg>
        </button>
    </div>
    <input type="range" min="0" max="1" step="0.01" value="0.5" id="speed-slider">
    <script>
        let buttonHoldInterval;
        let speedMultiplier = document.getElementById('speed-slider').value;
        document.getElementById('speed-slider').addEventListener('change', function() {
            speedMultiplier = this.value;
            console.log('Speed multiplier set to ' + speedMultiplier);
            fetch('/set-speed/' + speedMultiplier);
        })
        function handleButtonHold(buttonId, message) {
          document.getElementById(buttonId).addEventListener('mousedown', function() {
          console.log(message + ' button pressed');
          fetch('/' + buttonId + '/press');
        })
        document.getElementById(buttonId).addEventListener('mouseup', function() {
          console.log(message + ' button released');
          fetch('/' + buttonId + '/release');
          clearInterval(buttonHoldInterval);
        })
}
        function handleButtonClick(buttonId, message) {
            document.getElementById(buttonId).addEventListener('click', function() {
                console.log(message + ' button clicked');
                fetch('/' + buttonId);
            });
        }
        handleButtonHold('forward', 'Forward');
        handleButtonHold('backward', 'Backward');
        handleButtonHold('left', 'Left');
        handleButtonHold('right', 'Right');
        handleButtonHold('horn', 'Horn');
        handleButtonClick('light-front', 'Light Front');
        handleButtonClick('light-back', 'Light Back');
        document.getElementById('mode-switch').addEventListener('click', function() {
            console.log('Mode switch button pressed');
        });
    </script>
</body>
</html>
)rawliteral";

我尝试更改缩进、设置或删除分号等。到目前为止没有任何效果。我对能得到的每一个帮助都很满意。

如何重现错误： 使用最新的 Arduino IDE。 使用官方ESP8266库。 将代码上传到ESP并连接WIFI。 （https://sourceb.in/l71sjRog4d） 打开ESP的网站

javascript c++ arduino arduino-esp8266
1个回答
0
投票
#line 94 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
function handleButtonHold(buttonId, message);
#line 105 "C:\\Users\\david\\Desktop\\Fomanoch\\fomanoch\\fomanoch.ino"
function handleButtonClick(buttonId, message);
}

该问题与 C++ 或 Arduino 无关。你的 Arduino 代码没问题。

这两个函数的 JavaScript 代码中存在语法错误。如果您打开浏览器的开发模式，实际上可以看到这些错误。

Safari 上显示错误

Firefox 上显示错误

要解决语法错误，请将函数定义更改为：

var handleButtonHold = function(buttonId, message) {
    document.getElementById(buttonId).addEventListener('mousedown', function() {
        console.log(message + ' button pressed');
        fetch('/' + buttonId + '/press');
    })
    document.getElementById(buttonId).addEventListener('mouseup', function() {
        console.log(message + ' button released');
        fetch('/' + buttonId + '/release');
        clearInterval(buttonHoldInterval);
    })
}
var handleButtonClick = function(buttonId, message) {
    document.getElementById(buttonId).addEventListener('click', function() {
        console.log(message + ' button clicked');
        fetch('/' + buttonId);
    });
}

一旦修复了这些代码，您所看到的问题就会消失。但是，还有另一个错误，即您的 html 中没有定义 

mode-switch
，因此 
document.getElementById('mode-switch')
返回 
null
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.