This is my javascript function:
document.addEventListener('DOMContentLoaded', function() {
// Check if user is logged in
const loggedInUser = JSON.parse(localStorage.getItem('loggedInUser'));
if (!loggedInUser) {
window.location.href = 'login.html';
return;
}
// Display welcome message
const welcomeMessage = document.getElementById('welcome-message');
if (welcomeMessage) {
welcomeMessage.textContent = `Welcome, ${loggedInUser.username}!`;
}
const form = document.getElementById('symptom-form');
if (!form) {
console.error('Form not found');
return;
}
resultDiv = document.getElementById('result');
form.addEventListener('submit', function (e) {
e.preventDefault();
e.stopImmediatePropagation()
const symptomsInput = document.getElementById('symptoms');
const symptoms = symptomsInput.value.trim();
if (!symptoms) {
alert('Please enter your symptoms.');
return;
}
fetch('http://localhost:5000/diagnose', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${loggedInUser.email}`
},
body: JSON.stringify({ symptoms: symptoms, email: loggedInUser.email }),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
displayResults(data, symptoms);
})
.catch(error => {
console.error('Error:', error);
resultDiv.innerHTML = '<p style="color: red;">An error occurred </p>';
});
}
)
});
It runs fine, fetches the diagnosis and recommendation but once that’s done the page refreshes and it all happens in a second, in fact the only way I know it refreshes is because of the console message: Navigated to localhost:5500/index.html