I am developing a module management system using JavaScript, where users can view, add, and manage academic modules for different degrees and batches. However, I am encountering issues with the buttons that are supposed to trigger functions to add modules and navigate back to the module list.

The buttons for adding modules and navigating back to the modules list are not functioning as expected. The functions addModule and viewOrAddModules are supposed to be called when the buttons are clicked, but it seems they are not working.

• Here’s the script :

let modules = JSON.parse(localStorage.getItem('modules')) || {};

function viewOrAddModules(degree, batchName) {
    const year = document.getElementById('selectYear').value;
    const semester = document.getElementById('selectSemester').value;
    const semesterKey = `Year${year}_Semester${semester}`;

    document.getElementById('mainContent').innerHTML = `
        <h2>Modules for ${degree} - ${batchName} (Year ${year}, Semester ${semester})</h2>
        <button onclick="showAddModuleForm('${degree}', '${batchName}', '${semesterKey}')">Add Module</button>
        <table id="moduleTable" class="module-table">
            <thead>
                <tr>
                    <th>Module Name</th>
                    <th>Module Code</th>
                    <th>Credits</th>
                </tr>
            </thead>
            <tbody id="moduleTableBody"></tbody>
        </table>
        <button onclick="showYearsAndSemesters('${degree}', '${batchName}')">Back to Year/Semester</button>
    `;
}

function showAddModuleForm(degree, batchName, semesterKey) {
    document.getElementById('mainContent').innerHTML = `
        <h2>Add Module for ${degree} - ${batchName}</h2>
        <div class="form-container">
            <label for="moduleName">Module Name:</label>
            <input type="text" id="moduleName" required>
            <label for="moduleCode">Module Code:</label>
            <input type="text" id="moduleCode" required>
            <label for="moduleCredits">Credits:</label>
            <input type="number" id="moduleCredits" required>
            <button onclick="addModule('${degree}', '${batchName}', '${semesterKey}')">Add Module</button>
        </div>
        <button onclick="viewOrAddModules('${degree}', '${batchName}')">Back to Modules</button>
    `;
}

function addModule(degree, batchName, semesterKey) {
    const moduleName = document.getElementById('moduleName').value.trim();
    const moduleCode = document.getElementById('moduleCode').value.trim();
    const moduleCredits = document.getElementById('moduleCredits').value.trim();

    if (moduleName && moduleCode && moduleCredits) {
        if (!modules[batchName]) modules[batchName] = {};
        if (!modules[batchName][semesterKey]) modules[batchName][semesterKey] = [];

        modules[batchName][semesterKey].push({ name: moduleName, code: moduleCode, credits: moduleCredits });
        localStorage.setItem('modules', JSON.stringify(modules));

        alert('Module added successfully!');
        viewOrAddModules(degree, batchName);
    } else {
        alert('Please fill all fields correctly.');
    }
}