通过JS更改多个类中的内容

Question

快速问：

我想更改下面突出显示范围的HTML值（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>

我尝试了以下操作：

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

这有意义吗？谢谢！ ：）

Answer 1

document.getElementsByClassName返回具有指定类名的文档中所有元素的集合，作为NodeList对象。因此，这就是为什么我检查长度。您还可以使用document.querySelector，它返回文档中带有类“ xxxx”的第一个元素。我都放！您也可以使用jquery来做到这一点，但我认为您想要纯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>

Answer 2

尝试这个？：

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

Answer 3

使用querySelector()更简单。这将返回第一个元素。

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>