How to increment javascript variables inside script using for loop-CodePudding

Is is possible to increment javascript variables. I have a table that gets information from a database which then displays an edit option, once clicked it shows the user and then a drop down for a bunch of products to assign to that user. Once the user clicks on a product then it displays the price of that product. Now each entry needs to have a unique ID, which i succeeded by incrementing the ID's in the script, however the variables also need to change, this will eliminate me having to type out the script each time.

For this case here is the script and what i have tried. Just not successful on incrementing the variable names.

Note that the ID's gets populates with the ID's from the database. So it would be product_info1, product_info2 and the price would be price1, price2 and so on. Just the program does not want to work with the same variable names.

HTML

<table>
<tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Phone Number</th>
    <th>Gender</th>
</tr>

<?php

$sql = "SELECT * FROM test_table";
$result = $db->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while ($row = $result->fetch_assoc()) {
?>

    <tr>
    <td><?php echo $row["name"]; ?></td>
    <td><?php echo $row["surname"]; ?></td>
    <td><?php echo $row["phone_number"]; ?></td>
    <td><?php echo $row["gender"]; ?></td>
    <td><ul >
    <a data-toggle="modal" data-target="#SetProductCustomer<?= $row["id"]; ?>"><li >Edit</li></a>
        </ul></td>
    </tr>

   <div  id="SetProductCustomer<?= $row["id"]; ?>"  tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
     <div >
        <a href="test.php"><span >&times;</span></a>

           <p><?php echo $row['name']; ?> </p>

           <select style="width: 100%;" name="" id="product_info<?= $row["id"]; ?>" >

           <?php
           $records = mysqli_query($db, "SELECT * FROM products");    
              while ($data = mysqli_fetch_array($records)) {                                             
              echo '<option value="' . $data['product_name'] . '"
              data-price="' . $data['price'] . '"  >'
              . $data['product_name'] . '</option>';
            }

           ?>

         </select>

         <input type="text" name="price" id="price<?= $row["id"]; ?>"/>

            </div>
        </div>
      <?php
      }
   }
?>

<script>

for(var i=1; i < 4; i  ){

var mySelect = mySelect   i;
var myNewOption = myNewOption   i;

mySelect = document.getElementById("product_info"   i);

mySelect.addEventListener("change", function() {
myNewOption  = mySelect.options[mySelect.selectedIndex].getAttribute("data-price");

document.getElementById("price"   i).value = myNewOption;

});

}

</script>

CodePudding user response：

This is the correct way to have a change event handler on your dropdown that will update the price of the selected item showing it on the input box below:

const mySelect = document.getElementById("product_info");

mySelect.addEventListener('change', (event) => {   
  const optionSelected = event.target.querySelector(':checked');
  const price = optionSelected.dataset.price;  
  document.getElementById('price').value = price;      
});

<select style="width: 100%;" name="" id="product_info" >
  <option value="Gibson" data-price="2500">Gibson</option>
  <option value="Drums" data-price="35000">Drums</option>
</select>

<input type="text" name="price" id="price" value="" />

CodePudding user response：

All i changed was the var to let in the for loop and that solved my problem. Thank you for all the comments.

<script>

for(let i=1; i<10; i  ) {
let mySelect = document.getElementById("product_info"   i)

mySelect.addEventListener("change", () => document.getElementById("price"   i).value = mySelect.options[mySelect.selectedIndex].getAttribute("data-price"))

console.log(mySelect);

}

</script>

CodePudding user response：

In this case i would do sommething like this:

for(let i=1; i<10; i  ) {
    let mySelect = document.getElementById("product_info"   i)

    mySelect.addEventListener("change", () => document.getElementById("price").value = mySelect.options[mySelect.selectedIndex].getAttribute("data-price"   i))
}

<select style="width: 100%;" name="" id="product_info" >

  <option value="Gibson" data-price="2500">Gibson</option>
  <option value="Drums" data-price="35000">Drums</option>


</select>

<input type="text" name="price" id="price" value="" />