Language will not change upon dropdown selection

[Tasha53505]

Console Log will ONLY trigger one language, meaning it will only stay as one language. THis was not the case before I pushed to main I thought the fix was to removed "selected" from the dropdowns, but not Im not so sure:

[Tasha53505]

I thought it would be that same as #35 where because things were loaded AFTER the DOM, that it wasn't attaching the events properly.

This is somewhat the case

document.addEventListener("DOMContentLoaded", function() {

    // Event delegation for click events
    document.body.addEventListener('click', function(e) {
        // console.log(document.getElementById('languageSelect').value)

            if (e.target && e.target.id === "languageSelect") {
                const selectedLanguage = e.target.value;
                console.log("Language select changed to:", selectedLanguage);
            }

        if (e.target && e.target.id === 'testButton') {
            console.log('testButton clicked');
        } 

        if (e.target && e.target.id === 'saveSettings') {
            e.preventDefault(); // Prevent default behavior

            const selectedLanguage = document.getElementById("languageSelect").value;
            console.log("Save Settings BUTTON CLICKED");
            console.log("Selected language:", selectedLanguage); // Log the selected language

            // Send a JSON-RPC request to update the language in the server.prefs file
            updateLanguageSetting(selectedLanguage);    
        }
    });
});

It's now registering the change, but not saving it:

Commit: https://github.com/Tasha53505/159.356-capstone-project-group/commit/969802386e7d55a3ab023d0f26bc8ccb5b2c26ed

[Tasha53505]

document.addEventListener("DOMContentLoaded", function() {
    let selectedLanguage = document.getElementById("languageSelect").value; // Initialize variable

    // Event delegation for click events
    document.body.addEventListener('click', function(e) {
        // Handle language selection change
        if (e.target && e.target.id === "languageSelect") {
            selectedLanguage = e.target.value; // Update variable on change
            console.log("Language select changed to (languageSelect statement):", selectedLanguage);
        }

        // Check if the test button was clicked
        if (e.target && e.target.id === 'testButton') {
            console.log('testButton clicked');
        } 

        // Check if the save settings button was clicked
        if (e.target && e.target.id === 'saveSettings') {
            e.preventDefault(); // Prevent default behavior

            console.log("Save Settings BUTTON CLICKED");
            console.log("Selected language inside saveSettings:", selectedLanguage); // Log the selected language

            // Send a JSON-RPC request to update the language in the server.prefs file
            updateLanguageSetting(selectedLanguage);    
        }
    });
});

the Fix

The fix was adding a global variable ALONGSIDE (instead of a local variable for EACH If statement) making sure it was inside the document.body (event delegation again)

Commit: https://github.com/Tasha53505/159.356-capstone-project-group/commit/9fa988848651e8ea2026bbea38689b17c5395b71