javascript - 通过 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>