Quiero que se cargue tan pronto como abra la ventana después de obtener los datos del lado del servidor.
Aquí está el HTML:
<body> <h1> Just another counter </h1> <div class="count-area"> <button type="button" onClick="increment()"> + </button> <button type="button" onClick="decrement()"> - </button> <p>Count: <a id="clicks">0</a></p> </div> </body> </html>Aquí está el javascript del lado del cliente:
window.onload = function() { fetch("/").then(response => response.json()).then(data => document.getElementById("clicks").innerHTML = data['clicks']); }; function increment() { fetch("/increment").then(response => response.json()).then(data => document.getElementById("clicks").innerHTML = data['clicks']); }; function decrement() { fetch("/decrement").then(response => response.json()).then(data => document.getElementById("clicks").innerHTML = data['clicks']); };Una vez que se presionan los botones de incremento y disminución, aparece el conteo correcto, pero hasta entonces permanece en 0.
En lugar de usar windows.onload, intente usar onload="myFunction()" en el cuerpo:
function clicksLoad() { fetch("/").then(response => response.json()).then(data => document.getElementById("clicks").innerHTML = data['clicks']); }; function increment() { fetch("/increment").then(response => response.json()).then(data => document.getElementById("clicks").innerHTML = data['clicks']); }; function decrement() { fetch("/decrement").then(response => response.json()).then(data => document.getElementById("clicks").innerHTML = data['clicks']); }; <body onload="clicksLoad()"> <h1>Just another counter</h1> <div class="count-area"> <button type="button" onClick="increment()">+</button> <button type="button" onClick="decrement()">-</button> <p>Count: <a id="clicks"></a></p> </div> </body>