使用 JavaScript 按 HTML 表中的下拉菜单值过滤

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 -->

Answer 1

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

Answer 2

Your cade has some fundamental problems (fe 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;
}