CODEWITHSUNDEEP
javascripthtmlconsole.loggetelementsbytagnamegetelementsbyclassname
enzobarrett
enzobarrett

Reputation: 121

Getting Value of Child Element

I am writing code that can be applied to a webpage. I want to get the value of "A" as a variable. I have tried:

document.getElementById("inProgressGrade");

And

document.getElementsByClassName("b");

Here is the code I'm extracting from, to make it more complex all the values I want to get have the same class as each other.

<td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
90.62% 
<b>A</b>
</td>

Another one on the same webpage:

<td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
87.10% 
<b>B</b>
</td>


console.log(document.getElementsByClassName("b"));
<td style="width:60px; border: 1px solid #ABABAB;              padding: 2px;" class="inProgressGrade">87.10% <b>B</b></td>

console.log(document.getElementsByClassName("inProgressGrade"));
<td style="width:60px; border: 1px solid #ABABAB;              padding: 2px;" class="inProgressGrade">87.10% <b>B</b></td>

Upvotes: 3

Views: 463

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could use .querySelector() with textContent just like :

document.querySelector('.inProgressGrade b').textContent


console.log(document.querySelector('.inProgressGrade>b').textContent);
<table>
  <tr>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      90.62%
      <b>A</b>
    </td>
  </tr>
</table>

If you want the both letters you could use .querySelectorAll() with loop like :

var letters = document.querySelectorAll('.inProgressGrade b');

for( var i = 0; i < letters.length; i++) {
    console.log( letters[i].textContent );
}

Code:

var letters = document.querySelectorAll('.inProgressGrade b');

for (var i = 0; i < letters.length; i++) {
  console.log(letters[i].textContent);
}
<table>
  <tr>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      90.62%
      <b>A</b>
    </td>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      87.10%
      <b>B</b>
    </td>
  </tr>
</table>

Upvotes: 1

SourceOverflow
SourceOverflow

Reputation: 2048

.getElementsByClassName() return an array, therefore you have to loop through it. After that all you need to do is use .innerText to get its "value".

(function() {
  const allTds = document.getElementsByClassName('inProgressGrade'); //get all td-elements for which you want the value

  var values = [];

  for (let i = 0; i < allTds.length; ++i) {
    const bEl = allTds[i].getElementsByTagName('b')[0]; // takes the first b-element, you'll need another loop if there are multiple

    /* Since <b> is an inline element it will be part of its parents innerText */
    const textWithChild = allTds[i].innerText;
    const text = textWithChild.substring(0, textWithChild.length - bEl.innerText.length - 1);
    console.log(`The value of ${bEl.innerText} is <${text}>`);
  }
})()
<table>
  <tr>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      90.62%
      <b>A</b>
    </td>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      87.10%
      <b>B</b>
    </td>
  </tr>
</table>

Upvotes: 1

Matt Spinks
Matt Spinks

Reputation: 6698

document.querySelectorAll will be your friend here. You will need to identify all b elements that are underneath .inProgressGrade. You will also have to use a loop to iterate through all your elements, since there are multiples. 

var els = document.querySelectorAll(".inProgressGrade b");
var vals = [];
for(var i in els) {
  if (els[i] && els[i].innerText)
    vals.push(els[i].innerText);
}
for(var i in vals) {
  console.log(vals[i]);
}
<table id="myTable">
<tbody>

<tr>
<td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" 
class="inProgressGrade">
90.62% 
<b>A</b>
</td>
</tr>

<tr>
<td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" 
class="inProgressGrade">
87.10% 
<b>B</b>
</td>
</tr>

</tbody>
</table>

Upvotes: 1

Related Questions