Display An Alert On My Html Page By Reading An Array Map Data Within The Jscript

I need to have student scores which I have stored in an array map. I have set an option dropdown list in html with corresponding names. All Ineed to do is that when I click on any

Solution 1:

As easy as this:

jGradeMap = newMap();
jGradeMap.set("John", 55);
jGradeMap.set("Tom", 60);
jGradeMap.set("Kate", 70);
jGradeMap.set("Lisa", 65);
jGradeMap.set("Ziva", 85);

document
  .getElementById('foo')
  .addEventListener('change', () => {
    console.log(`Name: ${foo.value}, Score: ${jGradeMap.get(foo.value)}`);
  });

<selectid="foo"><optiondisabledselected>Select Name for score</option><optionvalue="John">John</option><optionvalue="Tom">Tom</option><optionvalue="Kate">Kate</option><optionvalue="Lisa">Lisa</option><optionvalue="Ziva">Ziva</option></select>

Same thing with alert:

jGradeMap = newMap();
jGradeMap.set("John", 55);
jGradeMap.set("Tom", 60);
jGradeMap.set("Kate", 70);
jGradeMap.set("Lisa", 65);
jGradeMap.set("Ziva", 85);

document
  .getElementById('foo')
  .addEventListener('change', () => {
    alert(`Name: ${foo.value}, Score: ${jGradeMap.get(foo.value)}`);
  });

<selectid="foo"><optiondisabledselected>Select Name for score</option><optionvalue="John">John</option><optionvalue="Tom">Tom</option><optionvalue="Kate">Kate</option><optionvalue="Lisa">Lisa</option><optionvalue="Ziva">Ziva</option></select>

Changes:

• Add the listener to the change event, not click.
• Instead of option name= use option value=.
• Don't use inline event listeners, it's widely considered bad practice. Instead, use addEventListener on the DOM node.