Filtering by drop down menu value in an HTML table using JavaScript

Question

I have created a very simple table in HTML. The column "Sector" has 4 possible selections in a drop down list. I type manually the amount of money in the second column. What I want to do is to display Total Money in the third column, which should be:

Total money = (Amount of money) * 1, in case that Sector = Footbal (and therefore value "s1")

Total money = (Amount of money) * 9, in any other case

For some reason it multiplies always by 9. How can I make this work?

function getValue() {
  var selectedValue1 = document.querySelectorAll(".sector");

  if (selectedValue1 == 's1') {
    CONSTANT = 1;
  } else {
    CONSTANT = 9;
  }
}

var Initial = document.querySelectorAll('.number1');
var Double = document.querySelectorAll('.number2');

Initial.forEach(myFunction);

function myFunction(item, index) {
  getValue()
  item.addEventListener('change', (event) => {
    var initialValue = event.target.value;
    Double[index].value = initialValue * CONSTANT;
  });
}

<! --COMIENZO TABLA -->

<table class="egt">

  <! --SEGUNDA LINEA -->

  <tr>
    <th>Sector</th>
    <th>Amount of money</th>
    <th>Total money</th>
  </tr>

  <! --TERCERA LINEA -->

  <tr>

    <td>
      <select class="sector">
        <option value="s1">Football</option>
        <option value="s2">Basketball</option>
        <option value="s3">Volleyball</option>
        <option value="s4">Rugby</option>
      </select>
    </td>

    <td>
      <input type="number" class="number1">
    </td>

    <td>
      <input type="number" class="number2">
    </td>

  </tr>

  <! --CUARTA LINEA -->

  <tr>

    <td>
      <select class="sector">
        <option value="s1">Football</option>
        <option value="s2">Basketball</option>
        <option value="s3">Volleyball</option>
        <option value="s4">Rugby</option>
      </select>
    </td>

    <td>
      <input type="number" class="number1">
    </td>

    <td>
      <input type="number" class="number2">
    </td>

  </tr>

</table>

<! --FINAL TABLA -->

mplungjan · Accepted Answer · 2020-10-15 10:22:54Z

You should delegate and get the value from the select on change

I added thead and tbody

const table = document.querySelector(".egt");
table.addEventListener("input", function(e) { // when ANYTHING changes
  [...table.querySelectorAll("tbody tr")].forEach(row => { // loop over all rows
    const sectorValue = row.querySelector(".sector").value == 's1' ? 1 : 9; // from this row
    const num1 = row.querySelector(".number1").value;
    row.querySelector(".number2").value = num1 * sectorValue;
  });
})

<! --COMIENZO TABLA -->

<table class="egt">
  <thead>
    <! --SEGUNDA LINEA -->
    <tr>
      <th>Sector</th>
      <th>Amount of money</th>
      <th>Total money</th>
    </tr>
  </thead>
  <! --TERCERA LINEA -->
  <tbody>
    <tr>
      <td>
        <select class="sector">
          <option value="s1">Football</option>
          <option value="s2">Basketball</option>
          <option value="s3">Volleyball</option>
          <option value="s4">Rugby</option>
        </select>
      </td>
      <td>
        <input type="number" class="number1">
      </td>
      <td>
        <input type="number" class="number2">
      </td>
    </tr>
    <! --CUARTA LINEA -->
    <tr>
      <td>
        <select class="sector">
          <option value="s1">Football</option>
          <option value="s2">Basketball</option>
          <option value="s3">Volleyball</option>
          <option value="s4">Rugby</option>
        </select>
      </td>
      <td>
        <input type="number" class="number1">
      </td>
      <td>
        <input type="number" class="number2">
      </td>
    </tr>
  </tbody>
</table>
<! --FINAL TABLA -->

NOTE: I use the spread operator [...collection] to convert an HTML Collection into an array - it is to handle older EDGE browsers which do not have native forEach on a collection. You can do table.querySelectorAll("tbody tr").forEach() if you do not care to support older Edge

It is a spread operator to convert an HTML Collection into an array - it is to handle older EDGE browsers which do not have native forEach on a collection. You can do table.querySelectorAll("tbody tr").forEach if you do not care to support older Edge

Bulent · Accepted Answer · 2020-10-16 06:23:05Z

Your cade has some fundamental problems (f.e. since selectedValue1 is a Node list, it can't be equal to "s1"), but also your approach is incorrect.

I don't see any reason to create loop here, but if need it:

Loop through each row, and then get the value of selection as well as number, and calculate the output and set it. This is easier and the correct way.

First, Give your table thead and tbody tags to create a wrapper around data.

let CONSTANT = 1;
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
   let selection = row.querySelector(".sector").value;
   CONSTANT = selection === "s1" ? 1 : 9;
   let number = row.querySelector(".number1").value;
   row.querySelector(".number2").value = CONSTANT * number;
})

But this is also not the best way. Instead of looping, just add event listeners and call a function to calculate.

let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
   row.querySelector(".number1").addEventListener("input", () => {
     calculate(row)
   })
   row.querySelector(".sector").addEventListener("change", () => {
      calculate(row)
   });
})

function calculate(row) {
    let constant = row.querySelector(".sector").value === "s1" ? 1 : 9;
    let num1 = row.querySelector(".number1").value;
    row.querySelector(".number2").value = constant * num1;
}

Collectives™ on Stack Overflow

Filtering by drop down menu value in an HTML table using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related