Why does the input value show in the console, but not in the dropdown boxes?

Question

I have built a basic reports program that accepts input from a user, adds this input to a series of paragraphs that are added to a dropdown list. The selection is then added to an array and printed in a final report.

Here is a JFiddle of the program. As you'll see, your input is printed in the console, but it does not get pulled through to the dropdown. Can you help me figure out why?

function populateSelects(dropDownConfig) {
    console.log(`I can get the student name here, but not in the dropdown box. Your name is ${studentName}.`);

for (let di = 0; di < dropDownConfig.length; di++) {
  for (let i = 0; i < dropDownConfig[di].categoryOptions.length; i++) {
    let opt = dropDownConfig[di].categoryOptions[i];

    let el = document.createElement("option");
    el.text = opt;
    el.value = opt;

    document.getElementById(dropDownConfig[di].id).add(el);
  }
}
}

The function seems to work okay, but not with the studentName/the value of the inputStudentName.

Thanks!

Answer 1

I've changed your code a little bit to make it shorter and more readable, imho. The main change I made is to use placeholder text instead of variable and replace it with studentName while options are been creating.

let options= {
  progress: ['%NAME% has made excellent progress', '%NAME% has made good progress', '%NAME% has made poor progress'],
  behaviour: ['%NAME% has excellent behaviour', '%NAME% has good behaviour', '%NAME% has poor behaviour'],
  attendance: ['%NAME% has excellent attendance', '%NAME% has good attendance', '%NAME% has poor attendance'],
  punctuality: ['%NAME% has excellent punctuality', '%NAME% has good punctuality', '%NAME% has poor punctuality'],
  improvements: ['%NAME% should carry on as they have', '%NAME% could make some improvements', '%NAME% must improve']
}

let dropDownConfig = ["progress", "behaviour", "attendance", "punctuality", "improvements"];

function populateSelects(dropDownConfig) {
  dropDownConfig.forEach(config => {
    let select = document.querySelector(`#${config}Dropdown`);
    options[config].forEach(text => {
        let option = document.createElement("OPTION");
        text = text.replace("%NAME%", studentName);
        option.text = text;
        option.value = text;
        select.appendChild(option);
    })
  })
}