如何使用Javascript获取带active类的激活按钮的value属性值

问题原因 #

document.getElementsByClassName() 返回的是 类数组的HTMLCollection集合，而非单个DOM元素，直接对集合访问.value属性自然会返回undefined。

修正方案 #

1. 先从返回的集合中取出第一个匹配的激活按钮元素，再访问它的value属性
2. 所有输入取值都转换为数字类型，避免字符串参与数学计算出现异常
3. 可选优化：用querySelector直接精准匹配评分区域的激活按钮，避免页面其他位置的active类元素干扰结果

关键修改行 #

把原来获取rating的代码替换为：

// 写法1：沿用原有逻辑的修正版
const rating = Number(document.getElementsByClassName("active")[0].value);

// 写法2：更稳妥的精准匹配版（推荐）
const rating = Number(document.querySelector("#finance-options .active").value);

完整修正后的JS代码 #

// 获取按钮容器元素
var btnContainer = document.getElementById("finance-options");

// 获取容器内所有带btn类的按钮
var btns = btnContainer.getElementsByClassName("btn");

// 遍历按钮，给点击的按钮添加active类
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function () {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

// 绑定计算按钮事件
const calculate = document.getElementById("calculate");
calculate.addEventListener("click", function () {
  // 取值同时转换为数字类型，避免计算异常
  const amount = Number(document.getElementById("finance-amount-input").value);
  const term = Number(document.getElementById("finance-term-input").value);
  // 精准获取激活的评分按钮value
  const rating = Number(document.querySelector("#finance-options .active").value);

  const loan = (amount * rating) / term;

  document.getElementById("result").innerHTML = "£" + loan.toFixed(2) + " PCM";
});

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