CODEWITHSUNDEEP
javascriptarrays
Stefan Michelangelo Mihajlovic
Stefan Michelangelo Mihajlovic

Reputation: 164

how do i split array by values using javascript

Since i dont know how to formulate question, i'll just try to explain what needed to be done. Program should take all values from table data and on submit button insert values of table data into input fields (each value into one input field) multyply by inserted number. I managed to take values from table data but dont know how to procced. Here is code i created for test. NOTE (pure javascript required)

<html>
<input type="text" class="class1" id="1"></br>
<input type="text" class="class1" id="2"></br>
<input type="text" class="class1" id="3"></br>
<input type="text" class="class1" id="4"></br>
<input type="text" class="class1" id="5"></br>
<table>
    <tr>
        <td class="class1" id="1">10</td>
    </tr>
    <tr>
        <td class="class1" id="2">20</td>
    </tr>
    <tr>
        <td class="class1" id="3">30</td>
    </tr>
    <tr>
        <td class="class1" id="4">40</td>
    </tr>
    <tr>
        <td class="class1" id="5">50</td>
    </tr>
</table>
insert number<input type="text" id="text">
<input type="submit" id="submit">

<script>
    var elements = document.getElementsByClassName("class1");
    var vrednost = "";
    for (i=0; i<elements.length; i++){
        vrednost += elements[i].textContent;
    }
    document.write(vrednost);

</script>

Upvotes: 3

Views: 329

Answers (2)

Rayon
Rayon

Reputation: 36609

Relate both the elements using data-id and select the element using querySelector specifying data-id attribute value.

Always remember that ID attribute must not be duplicate in a webpage.

You can not blindly rely on the position of the td and input elements as they may not be in sync.

The Array.from() method creates a new Array instance from an array-like or iterable object.

document.getElementById('submit').addEventListener('click', function() {
  var elements = document.querySelectorAll("td.class1"); //Select all `td` elements having class as `class1`
  var mul = document.getElementById('text').value; //get multiplication value
  Array.from(elements).forEach(function(elem) {
    document.querySelector("input.class1[data-id='" + elem.dataset.id + "']").value = (+elem.textContent * +mul);
  });
})
<input type="text" class="class1" data-id="1">
</br>
<input type="text" class="class1" data-id="2">
</br>
<input type="text" class="class1" data-id="3">
</br>
<input type="text" class="class1" data-id="4">
</br>
<input type="text" class="class1" data-id="5">
</br>
<table>
  <tr>
    <td class="class1" data-id="1">10</td>
  </tr>
  <tr>
    <td class="class1" data-id="2">20</td>
  </tr>
  <tr>
    <td class="class1" data-id="3">30</td>
  </tr>
  <tr>
    <td class="class1" data-id="4">40</td>
  </tr>
  <tr>
    <td class="class1" data-id="5">50</td>
  </tr>
</table>
insert number
<input type="text" id="text">
<input type="submit" id="submit">

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Try to use querySelectorAll to do your job effectively,

var tds = document.querySelectorAll("table td.class1");
var inputs = document.querySelectorAll("input[type='text'].class1");

Array.from(inputs).forEach(function(elm, i){
 elm.value = tds[i].textContent;
});

DEMO

Upvotes: 1

Related Questions