JavaScript Weight Input Validation Popup Triggering Multiple Times

I’m working on a weight tracking application using JavaScript, and I’m encountering an issue where the “Please enter your weight” alert appears when I try to save the weight. It seems like the saveWeight function is being triggered twice, causing the validation to fail the second time.

document.addEventListener(‘DOMContentLoaded’, function() {
const formattedDate = new Date().toISOString().split(‘T’)[0];
document.getElementById(‘currentDate’).textContent = Today's Date: ${formattedDate};

const weightInput = document.getElementById('weightInput');
const heightInput = document.getElementById('heightInput');
const genderSelect = document.getElementById('genderSelect');
const saveButton = document.getElementById('saveButton');
const clearButton = document.getElementById('clearButton');
const poundsOutput = document.getElementById('poundsOutput');
const bmiWeightOutput = document.getElementById('bmiWeight');
const bmiOutput = document.getElementById('bmiOutput');
const bmiStatus = document.getElementById('bmiStatus');
const ctx = document.getElementById('weightChart').getContext('2d');
let weightChart = null;

function loadSavedRecords() {
    const savedWeights = JSON.parse(localStorage.getItem('weightRecords')) || [];
    renderChart(savedWeights);
}

function saveWeight() {
    const weight = parseFloat(weightInput.value);
    
    // Check if the weight is valid before doing anything else
    if (weight) {
        let savedWeights = JSON.parse(localStorage.getItem('weightRecords')) || [];
        const currentDate = new Date().toISOString().split('T')[0]; // Get the current date again
        
        savedWeights.push({ date: currentDate, weight });
        localStorage.setItem('weightRecords', JSON.stringify(savedWeights));
        loadSavedRecords();
        calculateBMI(weight);
        weightInput.value = ''; // Clear the input field after saving
    } else {
        alert('Please enter your weight');
    }
}

function renderChart(savedWeights) {
    const labels = savedWeights.map(record => record.date);
    const data = savedWeights.map(record => record.weight);

    if (weightChart) {
        weightChart.destroy();
    }

    if (data.length > 0) {
        weightChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Weight (kg)',
                    data: data,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                }]
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Weight (kg)'
                        }
                    }
                }
            }
        });
    } else {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }
}

function calculateBMI(weight) {
    const heightInMeters = heightInput.value / 100;
    const bmi = (weight / (heightInMeters * heightInMeters)).toFixed(2);
    bmiWeightOutput.textContent = weight;
    bmiOutput.textContent = bmi;

    let status;
    if (bmi < 18.5) status = "Underweight";
    else if (bmi < 24) status = "Normal weight";
    else if (bmi < 29) status = "Overweight";
    else status = "Obesity";

    bmiStatus.textContent = status;
}

function clearData() {
    localStorage.removeItem('weightRecords');
    loadSavedRecords();
    bmiWeightOutput.textContent = '0';
    bmiOutput.textContent = '0';
    bmiStatus.textContent = 'Unknown';
}

const confirmModal = document.getElementById('confirmModal');
const modalClose = document.getElementById('modalClose');
const cancelClear = document.getElementById('cancelClear');
const confirmClear = document.getElementById('confirmClear');

clearButton.addEventListener('click', function() {
    confirmModal.style.display = 'block';
});

modalClose.onclick = function() {
    confirmModal.style.display = 'none';
}

cancelClear.onclick = function() {
    confirmModal.style.display = 'none';
}

confirmClear.onclick = function() {
    clearData();
    confirmModal.style.display = 'none';
}

weightInput.addEventListener('input', function() {
    const weight = parseFloat(weightInput.value);
    if (weight) {
        poundsOutput.textContent = (weight * 2.20462).toFixed(2);
    } else {
        poundsOutput.textContent = '0';
    }
});

saveButton.addEventListener('click', saveWeight);

loadSavedRecords();

});

——————————————-CODE END———————————————-

I have ensured that there are no duplicate event listeners attached to the save button.
The input field for weight is cleared after saving, but I believe the issue might be with how the weight is being parsed or the event listener itself.

Here’s the key part of my code related to saving the weight:

function saveWeight() {
const weight = parseFloat(weightInput.value);

// Check if the weight is valid before doing anything else
if (weight) {
    let savedWeights = JSON.parse(localStorage.getItem('weightRecords')) || [];
    const currentDate = new Date().toISOString().split('T')[0]; // Get the current date again
    
    savedWeights.push({ date: currentDate, weight });
    localStorage.setItem('weightRecords', JSON.stringify(savedWeights));
    loadSavedRecords();
    calculateBMI(weight);
    weightInput.value = ''; // Clear the input field after saving
} else {
    alert('Please enter your weight');
}

}

saveButton.addEventListener(‘click’, saveWeight);