Hi all, how are you?.
I had a couple of problems when making the logic of my web app with an ESP32 and platformio, I have an html document where in the <body> of the document I have a <div> and inside that <div> a paragraph to print the window resolution with a javascript function, in other div I have a button with an onclick event who calls a javascript function, right now my server sees all the files I need including the .js file.
The problem comes for two ways, the first way in the first div with the paragraph and the function inside, if I don’t define the javascript function before that <div> then the window resolution is not printed and the page inspect tool shows an error saying that the functon is not defined which is logic.
The second way is in the <div> with the onclick event where though the javascript is defined at the beggining of the document, the page inspect tool says that the function called from the onclick event is not defined…very rare, I read around there that the second problem presents itself because the javascript file doesn’t know all the variables and calls that are before its definition and because of that I need to define the javascript file at the end of the html document.
The only way for me to have both problems solved was to define the javascript file at the beggining and the end of the html document for crazy that it could sound.
I’m asking this here becaues in order to not keep myself programming the ESP32 every 5 minutes I’m developing the frontend part of the application in other project using live server in vscode and with this last server I don’t need to define the javascript twice in the same document but by defining it once at the beggining of the html document.
So to finish I think this is a linking problem of platformio or something like that.
Is ther a way to solve this?, I’ll be very grateful with the one that could help me with this.
I let the html code bellow so everyone can see what I’m saying.
Thanks in advance for the help.
<!DOCTYPE html>
<html>
<head>
<title>Control 2 Bombas</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data;,">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app"></script>
</head>
<body>
<div class="encabezado">
<header>
<div class="caja-logo-empresa">
<img class="logo-empresa" src="logoE">
</div>
<div class="titulo">
<h1>Control Hidroneumático</h1>
</div>
<div>
<p>
<script>
document.write(resPantalla())
</script>
</p>
</div>
</header>
</div>
<div class="salir">
<button onclick="botonSalir()">Salir</button>
</div>
<script src="app"></script>
</body>
</html>
Note that not the whole code of the html page is above, just the important parts. There you can see that I’m defining twite the javascript file called only app, that name is correctly processed at the arduino code
and bellow is the javascript file
function botonSalir() {
var sHTTP = new XMLHttpRequest();
sHTTP.open("GET", "no-permitido", true);
sHTTP.send();
setTimeout(function(){window.open("autenticar", "_self");}, 1000)
}
function resPantalla() {
return window.innerWidth;
}
Final note: I know that are other ways to do what my code does, what I need to know is why I have to define the javascript file twice to not to get errors when coding on platformio if with live server the frontend part works well.