使用 map.set 创建和填充 select 元素，它将键值显示为警报 - Javascript

Question

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.我正在尝试创建一个简单的 select 元素，该元素将使用 map 数组填充。

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:和 HTML：

<head>

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

</head>

<body onload = "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谢谢

Answer 1

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.您还应该更加注意代码 alignment、变量和 function 名称。

 // 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 onload="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>

使用 map.set 创建和填充 select 元素，它将键值显示为警报 - Javascript

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-09-04 11:52:37

使用 map.set 创建和填充 select 元素，它将键值显示为警报 - Javascript

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-09-04 11:52:37

解决方案1
0 已采纳 2022-09-04 11:52:37