基于数组内文本长度动态调整字体大小的问题排查

核心问题分析 #

你的代码存在三个关键错误，导致checkLength函数无法按预期工作：

• 遍历整个数组覆盖样式：checkLength里用map遍历所有文本，最终样式会被数组最后一个元素的判断结果覆盖，和当前显示的随机文本完全无关。
• 条件判断顺序颠倒：先判断text.length >= 60，会让更长的文本（比如长度>=144）也满足这个条件，永远触发不了第二个分支的样式。
• 传参错误：调用checkLength时传入的是整个texts数组，而非当前选中的随机文本。

修复后的代码 #

JavaScript #

let texts = [
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eius enim ut minus! Officia repellendus magni labore nulla repellat libero!",
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, velit.",
  "Lorem ipsum dolor sit amet consectetur."
]

const changeText = document.querySelector('.changing_content')
const btn = document.querySelector('.btn')

function getRandomElement(arr) {
  let randIndex = Math.floor(Math.random() * arr.length);
  return arr[randIndex];
}

function checkLength(text) {
  // 先判断更长的文本区间，避免逻辑覆盖
  if (text.length >= 144) {
    changeText.style.fontSize = "34px"
    changeText.style.color = "lightgreen"
  } else if (text.length >= 60) {
    changeText.style.fontSize = "24px"
    changeText.style.color = "blue"
  } else {
    changeText.style.fontSize = "14px"
    changeText.style.color = "black"
  }
}

btn.addEventListener('click', function() {
  let randomElement = getRandomElement(texts)
  changeText.innerHTML = randomElement
  // 传入当前选中的随机文本，而非整个数组
  checkLength(randomElement);
})

CSS（无需修改） #

.changing_content {
  font-size: 16px;
  color: red;
}

HTML（无需修改） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="prob.js" defer></script>
</head>

<body>
  <h1 class="h1"> hmm...</h1>
  <div class="changing_content">Im changing!</div>
  <button class="btn">Click me!</button>
</body>

</html>

修复说明 #

1. 修改checkLength参数逻辑：改为接收单个文本字符串，直接针对当前显示的内容做判断，不再遍历整个数组。
2. 调整条件判断顺序：先判断长度更大的区间（>=144），再判断次长区间，确保每个长度范围都能触发对应的样式。
3. 修正调用传参：点击按钮时传入刚选中的随机文本，让样式判断和当前显示内容绑定。

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