Error TypeError Cannot set properties of null (setting ‘innerHTML‘)

Error TypeError Cannot set properties of null (setting ‘innerHTML’)

一、问题

HTML 显示 JavaScript 结果报错：Error TypeError Cannot set properties of null (setting ‘innerHTML’)

二、确定问题

    <div class="row">
        <div class="col">
            <h4 class="mt-5">Sent</h4>
            <div class="mt-1" style="outline: 1px solid silver; padding: 2em;">
                <pre id="paylad"><span class="text-muted">Nothing sent yet...</span></pre>
            </div>
        </div>

<script>
       let brokerBtn = document.getElementById("brokerBtn");
       let output = document.getElementById("output");
       let sent = document.getElementById("payload");
       let received = document.getElementById("received");

       brokerBtn.addEventListener("click", function(){
           const body = {
               method: 'POST',
           }

           fetch("http://localhost:8080", body)
           .then((response) => response.json())
           .then((data) => {
               console.log(data.message);
               sent.innerHTML = "empty post request";
               received.innerHTML = JSON.stringify(data, undefined, 4);
               if (data.error) {
                   console.log(data.message);
               } else {
                   output.innerHTML += `<br><strong>Response from broker service</strong>: ${data.message}`;
               }
           })
           .catch((error) => {
               output.innerHTML += "<br><br>Error: " + error;
           })
       })
       </script>

三、原因

查找元素 “paylad” 失败

四、解决方案

修改为正确的元素：payload

    <div class="row">
        <div class="col">
            <h4 class="mt-5">Sent</h4>
            <div class="mt-1" style="outline: 1px solid silver; padding: 2em;">
                <pre id="payload"><span class="text-muted">Nothing sent yet...</span></pre>
            </div>
        </div>