How to get child nodes in a <td> in javascript

Question

I'm trying to get the child nodes from a table, multiply that and show that on a input field. I have tried using textContext but it only returns first value not the later ones.

My Javascript code is:

function add() {
  console.log("this is working")
  var x = parseInt(document.getElementById("id_quantity").value);
  console.log(x, "value of x");
  var y = document.getElementById("quantity").textContent;
  document.getElementById("id_quantity_p1").value = x * y;

This is my HTML markup:

<div class="col-md-6 col-sm-8 col-12">
    <form method="post" id="MaterialRequestForm" data-kit-url="{% url 'employee:ajax_load_kit' %}"  onkeyup="add()"
                  data-product-url="{% url 'employee:ajax_load_product' %}"
                  novalidate>
                {% csrf_token %}
                {{ form|crispy }}


                <button type="submit">Save</button>
                <div id="products-table" class="col-md-12 col-sm-8 col-12 product-table-ajax">

                </div>
            </form>
        </div>

And This is my table's HTML code:

{% for product in products %}
    <tr>
        <td>{{ product.id }}</td>
        <td>{{ product.product_name }}</td>
        {% for i in quantities %}
            {% if forloop.counter == forloop.parentloop.counter %}
                <td id="quantity">{{ i }}</td>
            {% endif %}
        {% endfor %}

    {% endfor %}

In this <td id-"quantity" returns multiple values and I want first two of it.

They are in django HTML template

In this I want to enter quantity and I want that it should get multiplied by content Std Qty in column and get filled in "quantity p1", "quantity p2", "quantity p3". eg. quantitystdQty1=quantityP1, quantitystdQty[2]=quantityP2, quantity*stdQty[3]=quantityP3 etc. For that I need specific elements in my <td>. Please help!

Answer 1

It will obviously only give you back the first one due to the fact that you are using a body.getElementById function, which only returns the very first element with the said id you look for.

For getting all the values you need, I suggest you could instead remake "id_quantity" into a class instead.

With that being done, use body.getElementsByClassName instead, write a loop that stores the data from every node of "id_quantity" and loop it back into the fields where you multiply them.

Here's a very quick example of what I mean

HTML:

<div id="container">
    <div id="color-div">
      <table>
        <thead>
          <th>1</th>
          <th>2</th>
        </thead>
        <tbody>
          <tr>
            <td class="input">5</td>
            <td class="output"></td>
          </tr>

          <tr>
            <td class="input">7</td>
            <td class="output"></td>
          </tr>

          <tr>
            <td class="input">10</td>
            <td class="output"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Javasript:

  let arr = [];

  const $input = document.getElementsByClassName("input");
  const $output = document.getElementsByClassName("output");

  for (let i = 0; i < $input.length; i += 1) {
    arr.push($input[i].innerHTML);
  }

  for (let i = 0; i < $output.length; i += 1) {
    $output[i].innerHTML = arr[i] * 5;
  }

Answer 2

I did that with a different way: I attached different ID's with the form and then instead of fetching child of I assigned different ID's to all the and then used getElementByID:

{% for product in products %}
<tr>
        <td>{{ product.id }}</td>
        <td>{{ product.product_name }}</td>
        {% for i in quantities %}
            {% if forloop.counter == forloop.parentloop.counter %}
                <td id="q{{ forloop.counter }}">{{ i }}</td>
            {% endif %}
        {% endfor %}

    {% endfor %}

    </tr>

And then changed my js accordingly:

  function add() {
  console.log("this is working")
  var x = parseInt(document.getElementById("id_quantity").value);
  console.log(x, "value of x");
  var y =document.getElementById("q1").textContent;
  var y1 =document.getElementById("q2").textContent;
  var y2 =document.getElementById("q3").textContent;
  var y3 =document.getElementById("q4").textContent;
  var y4 =document.getElementById("q5").textContent;
  document.getElementById("id_quantity_p1").value = x * y;
  document.getElementById("id_quantity_p2").value = x * y1;
  document.getElementById("id_quantity_p3").value = x * y2;
  document.getElementById("id_quantity_p4").value = x * y3;
  document.getElementById("id_quantity_p5").value = x * y4;