Using map.set to create and populate select element which will display key value as an alert

I'm very new here and not sure I've understood the task fully, so any feedback or advice would be greatly appreciated.

I am attempting to create a simple select element that will be populated using a map array.

When the name in the dropdown is selected, an alert will pop up with the corresponding value.

Here is what I have so far:

const studentMap = new Map();

studentMap.set("Dave", 89);
studentMap.set("Angela", 88);
studentMap.set("Luke", 97);
studentMap.set("Holly", 95);
studentMap.set("Ziggy", 89);

function dropDownGrades() {

    let select = document.createElement("SELECT");
    select.setAttribute("id", "mySelect");
    dropDownGradeBox.appendChild(select);

    for (let i = 0; i < studentMap.length; i  ) {
        let names = studentMap.set(key);
        let newOption = document.createElement("option");
        newOption.setAttribute("id", "nameOptions");
        let textNode = document.createTextNode(names);
        newOption.appendChild(textNode);
        select.appendChild(newOption);
    }
}

And the HTML:

<head>

    <script type="text/Javascript" src="task2.js"></script>

</head>

<body onl oad = "dropDownGrades()"> 
<h1> Task 11 - Name and Grades</h1>
<p> Below is the dropdown list of names and, when clicked on, it should hopefully display an alert 
    box with the respective grade
</p>
<div id="dropDownGradeBox" onchange="studentGrade()"></div>
</body>

Thank you

CodePudding user response：

I hope this code and my comments will help you in your learning. Please study each line that is unclear for you. You should also pay more attention to code alignment, variable and function names.

// Constants
const dropDownGradeBox = document.getElementById("dropDownGradeBox");

// Lets incapsulate Map initialization
// Anonymous function declaration   call
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
const studentMap = (function () {
  const map = new Map();
  map.set("Dave", 89);
  map.set("Angela", 88);
  map.set("Luke", 97);
  map.set("Holly", 95);
  map.set("Ziggy", 89);
  return map;
})();
// !Constants

// Naming changes
function Initialize() {
  const select = document.createElement("SELECT");
  select.setAttribute("id", "students-list");
  select.setAttribute("name", "students-list");
  select.onchange = onStudentsSelectChange;

  // Map objects can be iterated using for..of
  // where the item for each iteration is an array of [key, value]
  // You can see "Array destructuring" to extract key value from array
  // without need to use
  // "const item of studentMap"   "const key = item[0]"   "const value = item[1]"
  // but actually value is not used so it can be "const [key] of studentMap"
  for (const [key] of studentMap) {
    let newOption = document.createElement("option");
    // "value" attribute now holds a "key" of our map, which is a name of student.
    newOption.setAttribute("value", key);
    newOption.text = key;
    select.appendChild(newOption);
  }

  // <select> element is now prepared and holds all the options.
  dropDownGradeBox.appendChild(select);
}

// Naming!
function onStudentsSelectChange(e) {
  // "e.target.value" holds the "key" of the Map we used
  const selectedName = e.target.value;
  // studentsMap is "global" and we can get data from it by key
  // You can also extend Map Data to hold objects, not only "grade" values.
  // like map.set("Dave", {grade: 89, age: 22});
  const studentData = studentMap.get(selectedName);
  console.log(selectedName, studentData);
  // "String Interpolation"
  alert(`${selectedName}: ${studentData}`);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body onl oad="Initialize()">
    <h1>Task 11 - Name and Grades</h1>
    <p>
      Below is the dropdown list of names and, when clicked on, it should
      hopefully display an alert box with the respective grade
    </p>
    <div id="dropDownGradeBox"></div>
  </body>
</html>