How do i get total value of scores in the table?-CodePudding

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;
      }
    })
  })
}

How do i automatically get the value of total scores of each student? and also how do move the const data into php and make it hidden and call in the function using ajax? thank you for helping me.

CodePudding user response：

Like mentioned in the comments above, it would be recommended to ensure each ID is unique and maybe use value instead to ID in the selects.

You can make use of the querySelectorAll attribute to map over the information and get the total scores using a [data-score] attribute on the table column.

See my changes to allow for this

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>

I created a few variables to get the instances of all scores, then use the ES6 reduce method to accumulate these and set that value into the div for total scores.

CodePudding user response：

The Array.prototype.reduce() method is best suited for operations like this (sum 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);