Me encargaron usar un mapa para almacenar los nombres de 5 estudiantes con su nota promedio correspondiente. He inicializado este mapa con nombres y grados ficticios codificados de la siguiente manera:
const avgGrade = new Map(); avgGrade.set('Kyle', '82%'); avgGrade.set('Sarah', '50%'); avgGrade.set('Skye', '96%'); avgGrade.set('Taylor', '75%'); avgGrade.set('Bantu', '98%');Mi objetivo es escribir JavaScript para mostrar el nombre de cada estudiante en un menú desplegable. Cuando se selecciona el nombre del estudiante del menú desplegable, la calificación del estudiante debe mostrarse mediante una alerta. Estas son las sugerencias que me dieron (Sugerencia: recuerde que puede usar el valor y los atributos de HTML interno de un elemento).
Intenté hacer esto, pero hay algo que no estoy haciendo bien. ¿Alguien puede decirme dónde me estoy equivocando? Aquí está mi código:
//dropdown menu using a for loop let dropdown = document.querySelector('#dropdown'); for (i=0; i<avgGrade.length; i++){ let option = document.createElement('option'); option.innerHTML = avgGrade.keys(); dropdown.appendChild(option); } //also,I to just alert like this: function studentGrades()//called the function in select tag on the DOM using the onchange event { alert( Select.options[selectedIndex].value + ' average grade is ' + avgGrade.values[i]); }Deberá asegurarse de que está iterando Map correctamente. Puedes usar forEach() para eso. Para insertar sus options , proporcione tanto el text como el value .
Las variables como Select , i , selectedIndex no están definidas en su código.
Para obtener los valores de Map , utilice métodos Map estándar como get() .
const avgGrade = new Map(); avgGrade.set('Kyle', '82%'); avgGrade.set('Sarah', '50%'); avgGrade.set('Skye', '96%'); avgGrade.set('Taylor', '75%'); avgGrade.set('Bantu', '98%'); let dropdown = document.querySelector('#dropdown'); avgGrade.forEach((val, key) => { let option = document.createElement('option'); option.text = key; option.value = key; dropdown.appendChild(option); }); //also,I to just alert like this: function studentGrades(select) { //called the function in select tag on the DOM using the onchange event alert(select.value + ' average grade is ' + avgGrade.get(select.value)); } <select id="dropdown" onchange="studentGrades(this)"> </select> Me tomé la libertad de pasar this como un argumento en onChange. Puede que lo estés haciendo de otra forma.