HTML:
<table> <tr> <th>Student Name</th> <th>Student Score</th> </tr> <tr> <td> <select name="dropdown" id="dropdown" onchange="showScore()"> <option> - </option> <option id="StudentA"> Student A </option> <option id="StudentB"> Student B </option> </select> </td> <td></td> </tr> <tr> <td> <select name="dropdown" id="dropdown" onchange="showScore()"> <option> - </option> <option id="StudentA"> Student A </option> <option id="StudentB"> Student B </option> </select> </td> <td></td> </tr> </table>JS:
const data = { "students": [{ "studentName": "studentA", "studentScore": "60" }, { "studentName": "studentB", "studentScore": "50" }, ] } function showScore() { const dropdowns = document.querySelectorAll('#dropdown') dropdowns.forEach(dropdown => { const selectedVal = dropdown.options[dropdown.selectedIndex].id const formattedVal = selectedVal.charAt(0).toLowerCase() + selectedVal.slice(1) const score = data.students.map(item => { if (item.studentName == formattedVal) { dropdown.parentElement.parentElement.children[1].innerText = item.studentScore; } }) }) }¿Cómo obtengo automáticamente el valor de las puntuaciones totales de cada alumno? y también, ¿cómo mover los datos const a php y ocultarlos y llamar a la función usando ajax? gracias por ayudarme.
Como se mencionó en los comentarios anteriores, se recomendaría asegurarse de que cada ID sea único y tal vez usar el valor en lugar de ID en las selecciones.
Puede utilizar el atributo querySelectorAll para mapear la información y obtener los puntajes totales usando un atributo [data-score] en la columna de la tabla.
Ver mis cambios para permitir esto
const data = { "students": [{ "studentName": "studentA", "studentScore": "60" }, { "studentName": "studentB", "studentScore": "50" }, ] } function showScore() { const dropdowns = document.querySelectorAll('#dropdown') dropdowns.forEach(dropdown => { const selectedVal = dropdown.options[dropdown.selectedIndex].id const formattedVal = selectedVal.charAt(0).toLowerCase() + selectedVal.slice(1) const score = data.students.map(item => { if (item.studentName == formattedVal) { dropdown.parentElement.parentElement.children[1].innerText = item.studentScore; } }) }) // Sum total score let scores = document.querySelectorAll("[data-score]") let scoresInt = [...scores].map(item => parseInt(item.textContent) || 0) let sum = scoresInt.reduce((a, b) => a + b, 0) document.querySelector("#totalScore").innerHTML = sum } <table> <tr> <th>Student Name</th> <th>Student Score</th> </tr> <tr> <td> <select name="dropdown" id="dropdown" onchange="showScore()"> <option> - </option> <option id="StudentA"> Student A </option> <option id="StudentB"> Student B </option> </select> </td> <td data-score></td> </tr> <tr> <td> <select name="dropdown" id="dropdown" onchange="showScore()"> <option> - </option> <option id="StudentA"> Student A </option> <option id="StudentB"> Student B </option> </select> </td> <td data-score></td> </tr> </table> <div> Total Score </div> <div id="totalScore">0</div>Creé algunas variables para obtener las instancias de todas las puntuaciones, luego utilicé el método de reducción de ES6 para acumularlas y establecí ese valor en el div para las puntuaciones totales.
El método Array.prototype.reduce() es el más adecuado para operaciones como esta (suma total).
const sumTotal = arr => arr.reduce((sum, { price, quantity }) => sum + price * quantity, 0) const data = [ { id: 1, price: 30, quantity: 2 }, { id: 2, price: 20, quantity: 4 }, { id: 3, price: 10, quantity: 2 }, ] const total = sumTotal(data);