如何获取文本长度最大的按钮的索引i？解决Math.max循环失效问题

你的问题核心在于每次循环只单独计算当前按钮的长度，没有把所有按钮的长度放在一起做全局比较，而且循环中每次直接覆盖结果元素的内容，最后只会保留最后一次循环的数值。咱们来调整代码，让它正确实现需求：

修改后的完整代码 #

JavaScript 部分 #

function widthBtn() {
  // 获取容器内的所有按钮元素
  const buttons = document.querySelector(".container").getElementsByTagName("BUTTON");
  // 获取用于显示单个按钮长度的元素集合
  const demoElements = document.getElementsByClassName("demo");
  // 存储所有按钮的文本长度
  const textLengths = [];

  // 第一步：遍历按钮，记录每个按钮的文本长度并显示
  for (let i = 0; i < buttons.length; i++) {
    const currentLength = buttons[i].innerHTML.length;
    textLengths.push(currentLength);
    demoElements[i].innerHTML = currentLength;
  }

  // 第二步：计算所有长度中的最大值
  const maxLength = Math.max(...textLengths);
  document.getElementById("demon1").innerHTML = maxLength;

  // 第三步：找到最大长度对应的第一个按钮索引（若有多个相同最大值，取第一个）
  const maxIndex = textLengths.indexOf(maxLength);
  document.getElementById("demon").innerHTML = maxIndex !== -1 ? maxIndex : "no";
}

widthBtn();

关键改动说明 #

• 统一收集长度到数组：先把每个按钮的文本长度存入textLengths数组，再用Math.max(...textLengths)（扩展运算符...将数组元素展开为函数参数）获取全局最大值，解决了之前每次只传单个值的问题。
• 分离逻辑步骤：先完成所有按钮长度的显示，再统一计算最大值和对应索引，避免循环中频繁覆盖结果元素，导致最后只保留最后一个按钮的数值。
• 正确获取索引：用textLengths.indexOf(maxLength)找到最大值在数组中的第一个位置，直接对应按钮的索引。

如果需要处理多个按钮有相同最大长度的场景，可以改成收集所有符合条件的索引：

// 收集所有最大长度对应的索引
const allMaxIndices = [];
textLengths.forEach((length, index) => {
  if (length === maxLength) {
    allMaxIndices.push(index);
  }
});
document.getElementById("demon").innerHTML = allMaxIndices.length > 0 ? allMaxIndices.join(", ") : "no";

这样就能显示所有文本长度最大的按钮索引了。

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