CODEWITHSUNDEEP
javascripthtml
Sylvia Onwukwe
Sylvia Onwukwe

Reputation: 153

getElementsByClassName.value returning undefined

I have an html table

<table class="blog_table blog_table_res" cellspacing="0">
<thead>
  <tr>
    <th class="product-name">Product</th>
    <th class="product-price">Price</th>
    <th class="product-quantity">Quantity</th>
    <th class="product-subtotal">Total</th>
  </tr>
</thead>
<tbody>

  <tr class="cart_item">


    <td class="product-name" data-title="Product">
      <a href="https://whatever/">Mouse</a> </td>

    <td class="product-price" data-title="Price">
      <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span> </td>

    <td class="product-quantity" data-title="Quantity">
      <div class="quantity">
        <label class="screen-reader-text" for="quantity_5c80f7b813ae9">Quantity</label>
        <input type="number" class="input-text qty text" step="1" min="0" max=""
        />
      </div>
    </td>

    <td class="product-subtotal" data-title="Total">
      <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span> </td>
  </tr>


  <tr>
    <td colspan="6" class="actions">


      <button type="submit" class="button" name="update_cart" value="Update cart">Update cart</button>



  </tr>

</tbody>

I intend to extract the value of the product name, product price, product quantity and add to an array.

I wrote a js script to find classname and get value but it keeps returning undefined. I have tried a lot of solutions but still get null or undefined.

This is my js code:

var value = document.querySelector('.product-name')[0].value;
alert(value);

And I also tried: 

var elements = document.getElementsByClassName("product-name");
var value = elements[0].value;

 alert(value); // 1

I have also tried iterating the table using:

function checkForm() {
    var table = document.getElementsByClassName("shop_table");
    var arr = new Array();
    for (var i = 0, row; row = table.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            arr.push(row.cells[j].firstChild.value);
        }  
    }
    alert(arr);

Still got can't read property '0' of undefined I have browsed all over and tried many other solutions, please where am I getting it wrong, I need to extract the entries from the table

Upvotes: 0

Views: 2089

Answers (1)

Quentin
Quentin

Reputation: 943214

Form controls have values, table cells do not.

They have textContent, innerHTML and some other things, but not values.

var elements = document.getElementsByClassName("product-name");
var value = elements[0].textContent;
console.log(value);
<table class="blog_table blog_table_res" cellspacing="0">
  <thead>
    <tr>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-name" data-title="Product">
        <a href="https://whatever/">Mouse</a> </td>
      <td class="product-price" data-title="Price">
        <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span>
      </td>
      <td class="product-quantity" data-title="Quantity">
        <div class="quantity">
          <label class="screen-reader-text" for="quantity_5c80f7b813ae9">Quantity</label>
          <input type="number" class="input-text qty text" step="1" min="0" max="" />
        </div>
      </td>
      <td class="product-subtotal" data-title="Total">
        <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span>
      </td>
    </tr>
    <tr>
      <td colspan="6" class="actions">
        <button type="submit" class="button" name="update_cart" value="Update cart">Update cart</button>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions