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 = new Map();
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)}`);
  });

<select id="foo">
  <option disabled selected>Select Name for score</option>
  <option value="John">John</option>
  <option value="Tom">Tom</option>
  <option value="Kate">Kate</option>
  <option value="Lisa">Lisa</option>
  <option value="Ziva">Ziva</option>
</select>

Same thing with alert:

jGradeMap = new Map();
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)}`);
  });

<select id="foo">
  <option disabled selected>Select Name for score</option>
  <option value="John">John</option>
  <option value="Tom">Tom</option>
  <option value="Kate">Kate</option>
  <option value="Lisa">Lisa</option>
  <option value="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.