Issue with populating HTML elements using JS

Question

So I have to populate a dropdown menu based on the option a user chooses dynamically using JS and here is the boilerplate HTML:

const type = document.querySelector("#type");

const currentstudentOptions = [
    "Scholarship Application",
    "Handbook",
    "Eligibility and Admission",
    "Placement",
    "Fee Structure",
    "Programmes Offered",
];
const futureStudentOptions = [];

// type.addEventListener('click',addSubmenu())

type.addEventListener("click", (e)=> {
    console.log(e.target.value)
    console.log("clicked");
    const option = type.value || "";
    console.log(option);
    if (option === "") {
    } else if (option === "Current Student") {
        console.log("reahed here");
        createSubmenu(currentstudentOptions);
    }
});

function createSubmenu(optionList) {
    const output = document.querySelector(".output");
    output.textContent += "Looking For";
    const SubMenu = document.createElement("select");
    console.log(optionList);

    optionList.forEach(function (item) {
        SubMenu.innerHTML += `<option value=${item}>${item}</option>`;
    });

    output.appendChild(SubMenu);
}

<div class="container">
            <div class="Intro">
                I am a
                <select name="type" id="type">
                    <option value="" selected></option>
                    <option value="Current Student">Current Student</option>
                    <option value="Faculty">Faculty</option>
                    <option value="Visiting Professor">Visiting Professor</option>
                </select>
            </div>
            <div class="output"></div>
        </div>

On the first click the output is fine but if I click the first dropdown menu aagain the following happens :

My question is how does the array elements get appended as textContent when I am using template literals for the second dropdown Menu ?

Answer 1

First, you need to use change event instead of click event on the select.

Second, the causing of the unexpected text, because on each select change you add text += to the output element, you should reinitialize with =

output.textContent = "Looking For";

const type = document.querySelector("#type");

const currentstudentOptions = [
    "Scholarship Application",
    "Handbook",
    "Eligibility and Admission",
    "Placement",
    "Fee Structure",
    "Programmes Offered",
];
const futureStudentOptions = [];

// type.addEventListener('click',addSubmenu())

type.addEventListener("change", (e)=> {
    console.log(e.target.value)
    console.log("clicked");
    const option = type.value || "";
    console.log(option);
    if (option === "") {
    } else if (option === "Current Student") {
        console.log("reahed here");
        createSubmenu(currentstudentOptions);
    }
});

function createSubmenu(optionList) {
    const output = document.querySelector(".output");
    output.textContent = "Looking For";
    const SubMenu = document.createElement("select");
    console.log(optionList);

    optionList.forEach(function (item) {
        SubMenu.innerHTML += `<option value=${item}>${item}</option>`;
    });

    output.appendChild(SubMenu);
}

<div class="container">
            <div class="Intro">
                I am a
                <select name="type" id="type">
                    <option value="" selected></option>
                    <option value="Current Student">Current Student</option>
                    <option value="Faculty">Faculty</option>
                    <option value="Visiting Professor">Visiting Professor</option>
                </select>
            </div>
            <div class="output"></div>
        </div>