I am making a Tauri app Github Repo .
So I have two pages clock.html and index.html . There is one event listener attached to an element in index.html . So when I redirect the user to clock.html, javascript complains about the element no longer existing (basically a TypeError) which possibly halts the execution of upcoming javascript code.
To fix that I added an if statement around the addEventListener call to only add the event listener if it was on the correct page . But on doing that I get this weird error (title) which has no explanation whatsoever in the context of a Tauri app.
main.js ( /frontend/src/main.js )
async function addAlarm(targetDate) {
const alarm = {
date: targetDate.toString()
}
const response = await fetch("http://localhost:6969/alarms/" + userID + '/',
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(alarm)
}
);
let t = await response.text();
console.log(t);
document.getElementById('alarms').insertAdjacentHTML('afterbegin', `<div> ${t}</div>`);
}
async function register() {
const data = {
name: document.querySelector('[name="usercode"]').value,
serverpass: document.querySelector('[name="server-password"]').value
}
const response = await fetch('http://localhost:6969/users', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
userID = await response.text();
return userID;
}
if (window.location.href === "/") {
document.getElementById("login").addEventListener("click", async event => {
event.preventDefault();
await register();
window.location.replace("/clock");
});
}
if (window.location.href === "/clock") {
document.getElementById('add-alarm').addEventListener('click', async () => {
await addAlarm(document.querySelector('[type="datetime-local"]').value);
})
}