时间戳

首页 > 解决方案 > getElementsByClassName.value 返回未定义

javascript - getElementsByClassName.value 返回未定义

问题描述

我有一个 html 表

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

我打算提取产品名称、产品价格、产品数量的值并添加到数组中。

我编写了一个 js 脚本来查找类名并获取值，但它一直返回未定义。我尝试了很多解决方案，但仍然为 null 或未定义。

这是我的 js 代码：

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

我也试过：

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

 alert(value); // 1

我还尝试使用以下方法迭代表：

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

仍然无法读取未定义的属性“0”我已经浏览过并尝试了许多其他解决方案，请问我在哪里弄错了，我需要从表中提取条目

标签： javascripthtml

解决方案

表单控件有值，表格单元格没有。

他们有textContent,innerHTML和其他一些东西，但没有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>

推荐阅读