I have this html page that receives html elements got from javascript as shown in the code below. I aim to display the information in a div called ‘results’. It displays for a second, and then it disappears as if it’s being replaced suddenly.
Why is this happening?
How do I fix it?
const form = document.getElementById('symptom-form');
const resultDiv = document.getElementById('result');
const symptomsInput = document.getElementById('symptoms');
form.addEventListener('submit', function(event) {
event.preventDefault();
const symptoms = symptomsInput.value.trim();
// Input validation
if (!symptoms) {
resultDiv.innerHTML = '<p style="color: red;">Please enter your symptoms.</p>';
return;
}
resultDiv.innerHTML = '<p>Analyzing symptoms...</p>';
fetch('http://localhost:5000/diagnose', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
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 => {
resultDiv.style.display= "block";
displayResults(data, symptoms);
})
.catch((error) => {
console.error('Error:', error);
resultDiv.innerHTML = '<p style="color: red;">An error occurred while processing your request. Please try again.</p>';
});
});
function displayResults(data, symptoms) {
resultDiv.innerHTML = `
<h2>Diagnosis Results</h2>
<p><strong>Symptoms:</strong> ${symptoms}</p>
<p><strong>Possible Condition:</strong> ${data.diagnosis}</p>
<p><strong>Recommended Action:</strong> ${data.recommendation}</p>
<p><strong>Disclaimer:</strong> This is an educational demonstration only.
Always consult with a qualified healthcare professional for real medical advice.</p>
`;
// Clear the input field for the next entry
symptomsInput.value = '';
}