我的 div 显示一秒钟然后消失

Question

我有一个 html 页面，它接收从 javascript 获取的 html 元素，如下面的代码所示。我的目标是在名为“结果”的 div 中显示信息。它显示了一秒钟，然后就消失了，就像突然被替换一样。 为什么会发生这种情况？ 我该如何解决它？

    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 = '';
    }

Answer 1

出现此问题的原因是清除symmetryInput.value 的代码位于displayResults 函数内。当输入字段被清除时，表单将再次提交，从而导致页面刷新。为了防止这种情况，您应该在 event.preventDefault() 之后立即清除输入字段。

这里是更正的解释：“出现此问题是因为清除symptomInput.value的代码位于displayResults函数内。清除输入字段时，会重新提交表单，导致页面刷新。为防止这种情况，请清除输入字段就在 event.preventDefault() 之后。”