Esta es la página HTML principal y la tarea era crear una lista desplegable con los nombres de los estudiantes y, al hacer clic, debería mostrar su calificación en un cuadro de alerta. Este es un proyecto al que le estoy dando una segunda mirada para mejorar mi calificación e incluso después de aprender más, todavía estoy luchando para obtener el código final. //HTML Tarea2
JavaScript
Esta es la creación del mapa.
let avrGrades = new Map() avrGrades.set("Jade", 90) avrGrades.set("Vel", 88) avrGrades.set("Sky", 60) avrGrades.set("Rian", 70) avrGrades.set("Lizz", 90)Ejecuté un ciclo de prueba aquí para ver si se están leyendo los pares de valores clave.
for(let [key, value] of avrGrades){ console.log(key + " " + value) }Para ser honesto, crear la lista desplegable fue bastante simple.
for(let key of avrGrades.keys()){ let classList = document.getElementById("classList") //Creating an id attribute let att =document.createAttribute("id") att.value = "option" //Creating the option Element let listItem = document.createElement("option") //Adding the attribute to the option element listItem.setAttributeNode(att) listItem.innerHTML = key classList.appendChild(listItem) }Esto siembra la calificación al hacer clic y aquí es donde estoy luchando, probé algunas cosas pero nada funciona.
let show = document.getElementById("option") show.addEventListener("click", function(){ for(let value of avrGrades.values()){ alert(value) } })Ajusto tu código así:
const avrGrades = new Map(); const classList = document.getElementById("classList"); avrGrades.set("Jade", 90) avrGrades.set("Vel", 88) avrGrades.set("Sky", 60) avrGrades.set("Rian", 70) avrGrades.set("Lizz", 90) for (const key of avrGrades.keys()) { const listItem = document.createElement("option") listItem.innerHTML = key classList.appendChild(listItem) } classList.addEventListener("change", function() { alert(avrGrades.get(classList.options[classList.selectedIndex].text)) }) <select id='classList'></select> Intenta usar varias id iguales, pero las identificaciones deben ser únicas , simplemente uso el texto de la opción seleccionada para usar .get y alerta el valor de la calificación
Referencia:
Su código inicial debería funcionar si especifica una identificación única para cada una de las opciones. En este momento tienes
let att =document.createAttribute("id") att.value = "option" por lo que cada opción tiene la misma option de ID. Intente usar algo único como option-{key} para cada uno y configure el clic para cada ID.
También puede eliminar este problema de ID dirigiendo los elementos usando un nombre de clase en lugar de una ID
let shows = document.getElementsByClassName("option") for (var i = 0; i < shows.length; i++) { shows[i].addEventListener('click', [your function]); } suponiendo que le dé a estos elementos una clase con option de nombre