Document.Getelementsbyclassname().Innerhtml Always Returns "Undefined"

document.getElementsByClassName().innerHTML always returns undefined

document.getElementsByClassName() returns a nodeList, not an element!

So it should be :

document.getElementsByClassName('hidden')[0].innerHTML

and as you probably have more .hidden elements, and only want the one inside the current .box (which would be this in the event handler)

this.getElementsByClassName('hidden')[0].innerHTML

but why not jQuery

$(".box").click(function(){
        alert( $('.hidden', this).html() );
});

getElementsByClassName.value returning undefined

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">$</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">$</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>

document.getElementsByClassName().innerHTML always returns undefined

document.getElementsByClassName() returns a nodeList, not an element!

So it should be :

document.getElementsByClassName('hidden')[0].innerHTML

and as you probably have more .hidden elements, and only want the one inside the current .box (which would be this in the event handler)

this.getElementsByClassName('hidden')[0].innerHTML

but why not jQuery

$(".box").click(function(){
        alert( $('.hidden', this).html() );
});

Why does getElementsByClassName return undefined?

The setInterval executes after the function is run, by which point i has incremented to 4. You should create a closure over the element to preserve it

setInterval(runnable(elements[i], text, target_date), 1000);

// also pass target_date since it is needed
function runnable(el, text, target_date) {
    return function () {
        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        el.innerHTML = text + days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
    }
}

Demo: http://jsfiddle.net/87zbG/1/

getElementsByClassName produces error undefined

getElementsByClassName

Returns a set of elements which have all the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName on any element; it will return only elements which are descendants of the specified root element with the given class names.

So you should be doing

var elements = document.getElementsByClassName('output');
var combined = document.getElementById('combined');
for(var i=0; i < elements.length; i++) { 
  combined.innerHTML += elements[i].value + ",";
}

how to get all innerHTML when only $eval gives results ($$ returns undefined)

The page.$$eval method runs Array.from(document.querySelectorAll(selector)) in the background so what you get is an array. You can't apply (e) => e.innerText on an array directly (even if it has a length of 1) without iterating it or getting the right elements by their proper indexes (e.g.: e[0].innerText), otherwise you will get undefined.

You can use an Array.map to iterate over the matching elements and collect the innerText of each into an array.

const exerciseName = await page.$$eval(
    '.ExCategory-results > .ExResult-row:nth-child(2) > .ExResult-cell > .ExHeading > a',
    elements => elements.map(el => el.innerText)
  )

Output:

[ 'Rickshaw Carry' ]

---

Edit:

You can iterate the row classes using a loop with an index (easiest to use a regular for loop) by (1) counting the elements with the same class names:

const rowsCounts = await page.$$eval('.ExCategory-results > .ExResult-row', rows => rows.length)

Then (2) iterate over the children .ExResult-row:nth-child(n) ..., and collect the innerTexts to an array (exerciseNames):

const exerciseNames = []
for (let i = 1; i < rowsCounts + 1; i++) { // you mignt need i = 2
  const exerciseName = await page.$eval(
    `.ExCategory-results > .ExResult-row:nth-child(${i}) > .ExResult-cell > .ExHeading > a`,
    el => el.innerText)
  exerciseNames.push(exerciseName)
}

Output:

[
  'Rickshaw Carry',
  'Single-Leg Press',
  'Landmine twist',
  'Weighted pull-up',
  'T-Bar Row with Handle',
  'Palms-down wrist curl over bench'
]

Note: The loop should be started form 1 and not 0 in such cases, as there is no "nth-child(0)". In your example the 1st is missing as well, so you might need to start the iteration at 2.

JavaScript Print input innerHTML returns undefined?

It is quite simple, once you have the Element just read the value directly;

var val = element.value;

I would propose you use document.getElementById(String) though, and convert all of your classes to ID's, since they are unique anyway.

The alternative would be to use nodeList.item(0).value from a returned getElementsByClassName instance.

EDIT: A tip for the future, you should always include a JsFiddle as well as the source code. It makes stuff easier on the people answering your question.

---

Related Topics