Changing content in multiple classes via JS

Question

I want to change the HTML-value of the highlighted span below (class=percent-value):

<div id="verfuegbarstd" class="et_pb_number_counter_4" data-number-value="0" data-number-separator="">
  <div class="percent">
    <p>**<span class="percent-value">0</span>**<span class="percent-sign"></span></p>
  </div>
  <h3 class="title">Verfügbare Stunden</h3>
  <canvas height="0" width="0"></canvas>
</div>

I tried the following:

var verfuegbareStd = document.getElementsByClassName('et_pb_number_counter_4').getElementsByClassName('percent').getElementsByClassName('percent-value');
var budget = document.getElementsByClassName('et_pb_number_counter_2').getElementsByClassName('percent').getElementsByClassName('percent-value');
var lohnProStd = document.getElementsByClassName('et_pb_number_counter_3').getElementsByClassName('percent').getElementsByClassName('percent-value');
var gebrauchteStd = document.getElementsByClassName('et_pb_number_counter_5').getElementsByClassName('percent').getElementsByClassName('percent-value');
function calcVerfuegbareStd() {
  var calc = budget.innerHTML / lohnProStd.innerHTML;
  verfuegbareStd.innerHTML = calc;
}
calcVerfuegbareStd();

Does that make any sense?

Producing a `TypeError` normally doesn't make much sense -> [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Andreas, Oct 09 '19 at 09:45

George Stavrou · Answer 1 · 2019-10-09T09:54:38.170

document.getElementsByClassName returns a collection of all elements in the document with the specified class name, as a NodeList object. So thats why i check the length. You can use also document.querySelector which gets the first element in the document with the class "xxxx" is returned. I put both! You can do it with jquery also but i thought you want pure js.

var elements = document.getElementsByClassName('percent-value'); // List of elements
var spanQuery = document.querySelector('.percent-value'); // The  first element in the document with the class "myclass" is returned:
spanQuery.innerHTML = 'Hello!!!';
if (elements.length > 0) {
  var span = elements[0];
  span.innerHTML = 'Hello!!!';
}

<div id="verfuegbarstd" class="et_pb_number_counter_4" data-number-value="0" data-number-separator="">


  <div class="percent">
    <p>**<span class="percent-value">0</span>**<span class="percent-sign"></span></p>
  </div>
  <h3 class="title">Verfügbare Stunden</h3>
  <canvas height="0" width="0"></canvas></div>

score 0 · Answer 2 · answered Oct 09 '19 at 09:43

0

Try this?:

document.getElementsByClassName("percent-value").innerHTML = "the content you want";

answered Oct 09 '19 at 09:43

lukieluk5

26
2

It is a collection. It will need var elements = document.getElementsByClassName('percent-value'); element[0] for the span – George Stavrou Oct 09 '19 at 09:51

score 0 · Answer 3 · answered Oct 09 '19 at 09:49

It is simpler to use querySelector(). This will return the first element.

var verfuegbareStd = document.querySelector('.et_pb_number_counter_4 .percent .percent-value');

console.log(verfuegbareStd.innerHTML)

<div id="verfuegbarstd" class="et_pb_number_counter_4" data-number-value="0" data-number-separator="">
  <div class="percent">
    <p>**<span class="percent-value">0</span>**<span class="percent-sign"></span></p>
  </div>
  <h3 class="title">Verfügbare Stunden</h3>
  <canvas height="0" width="0"></canvas>
</div>

Changing content in multiple classes via JS

3 Answers3