通过JavaScript修改多类元素内容：我的实现代码是否合理？

1. HTMLCollection 不能直接链式调用 getElementsByClassName #

document.getElementsByClassName() 返回的是HTMLCollection（类数组对象），不是单个DOM元素，所以你不能像这样直接链式调用：

document.getElementsByClassName('et_pb_number_counter_4').getElementsByClassName('percent')

得先通过索引取出单个元素（假设页面中每个类名对应的元素只有一个），更推荐用querySelector——它支持CSS选择器语法，代码更简洁，还能直接返回第一个匹配的元素：

var verfuegbareStd = document.querySelector('.et_pb_number_counter_4 .percent .percent-value');
var budget = document.querySelector('.et_pb_number_counter_2 .percent .percent-value');
var lohnProStd = document.querySelector('.et_pb_number_counter_3 .percent .percent-value');
var gebrauchteStd = document.querySelector('.et_pb_number_counter_5 .percent .percent-value');

2. 必须处理字符串转数字的问题 #

innerHTML 获取到的是字符串类型，直接做除法运算很容易出问题（比如内容为空或非数字时，会得到NaN），所以要显式转成数字，同时做好异常处理：

function calcVerfuegbareStd() {
  // 转成数字，同时处理空值/非数字情况，默认设为0
  var budgetNum = parseFloat(budget.textContent) || 0;
  var lohnProStdNum = parseFloat(lohnProStd.textContent) || 0;
  
  // 避免除以0的错误
  if (lohnProStdNum === 0) {
    verfuegbareStd.textContent = 0;
    return;
  }
  
  var calc = budgetNum / lohnProStdNum;
  // 可根据需求保留小数位数，比如保留2位
  verfuegbareStd.textContent = calc.toFixed(2);
}

这里用textContent比innerHTML更安全，它只会获取纯文本内容，不会解析HTML标签。

3. 要确保DOM加载完成再执行代码 #

如果你的代码放在<head>标签里，会出现DOM还没加载完成就执行的情况，导致获取不到元素。可以把代码包裹在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  var verfuegbareStd = document.querySelector('.et_pb_number_counter_4 .percent .percent-value');
  var budget = document.querySelector('.et_pb_number_counter_2 .percent .percent-value');
  var lohnProStd = document.querySelector('.et_pb_number_counter_3 .percent .percent-value');
  var gebrauchteStd = document.querySelector('.et_pb_number_counter_5 .percent .percent-value');

  function calcVerfuegbareStd() {
    var budgetNum = parseFloat(budget.textContent) || 0;
    var lohnProStdNum = parseFloat(lohnProStd.textContent) || 0;
    
    if (lohnProStdNum === 0) {
      verfuegbareStd.textContent = 0;
      return;
    }
    
    var calc = budgetNum / lohnProStdNum;
    verfuegbareStd.textContent = calc.toFixed(2);
  }

  calcVerfuegbareStd();
});

总结 #

原代码的核心问题是对getElementsByClassName的返回值理解有误，同时没处理字符串转数字和DOM加载时机的问题。按照上面的修改，代码就能正常计算并更新percent-value的内容了。

内容的提问来源于stack exchange，提问作者Niels K