Webserver custom.js functions come back as undefined

ESPHome
1

The button shows up, but the send_alert() function comes up as undefined.
How do I get the DOM to see my functions?

My web server YAML =

web_server:
        port: 60073
        auth:
             password: ***********
             usrname: ************
             type: basic
          ota: false
          js_include: test.js
          local: false
          version: "2"

test.js =

document.addEventListener("DOMContentLoaded", () => {
    const root = document.body;

    root.innerHTML = `
        <script>
            function send_alert() {
                alert("this is an alert");
            }
        </script>

        <button onclick="send_alert()" id = "myButton" >Send Alert</button>

`;
});
2

Hi

I suspect you may not have given people enough information on what you are trying to achieve to help you. I’m not familiar with but one obvious one is your indentation is screwy and ESPHome gets a bit upset when not properly formatted.

I’d also look at your path to your test.js script and compare to how it is defined in the docs, yours doesn’t see to have the path defined.

3

Well I got it work, but not as local.

web_server:
  port: 60073
  auth:
    password: ************
    username: ************
    type: basic
  ota: false
 
  local: false
  version: "2"
  js_url: "https://<my_server>.com/www.js"
  js_include: test.js

test.js =

document.addEventListener("DOMContentLoaded", () => {
    const root = document.body;

    root.innerHTML = `<button onclick="send_alert()" id = "myButton" >Send Alert</button>`;
});

I downloaded www.js and added my functions to the end and uploaded them to a web server. So as long as that server is up, my interface works.
I tried putting my HTML after my functions in www.js and setting local: true. This failed by not updating the innerHTML. I will keep trying to get this to work local.