Question

为什么我收到无法设置未定义属性的错误[重复]

2022-09-05

488

javascript arrays

我尝试为所有 <li/> 元素指定字体大小，但出现错误，但我不知道原因。

错误：

error is : Uncaught TypeError: Cannot set properties of undefined (setting 'fontSize')

这是我的代码，请帮忙

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>

</ul>

<script>
  let sonuc;

  let taskList = document.getElementsByClassName("task");

  for (let task in taskList) {
    let i;
    i++;
    taskList[task].style.fontSize = "50px";
    taskList[task].style.color = "red";
  }
</script>

Answer 1

你的 for 循环是错误的。试试这个：

for (const task of taskList)
{
    task.style.fontSize = "50px";
    task.style.color = "red";
}

Answer 2

我不知道您的情况是否绝对需要使用 javascript（如果是这种情况，请随意在这个答案下发表评论），但我认为您可以使用 css 实现相同的结果。

.task {
  font-size: 50px;
  color: red;
}

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>
</ul>

Answer 3

in 循环不仅返回索引，还返回一些使您的数据无效的额外属性。

您可以通过 console.log 验证 in 循环中的所有值，如下所示

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>

</ul>

<script>
  let sonuc;

  let taskList = document.getElementsByClassName("task");

  for (let task in taskList) {
    console.log(task)
  }
</script>

就您而言，您的循环已在 length 处停止。

taskList['length'].style.fontSize = "50px"; //invalid, we don't have index for 'length'

您可以使用 of 循环

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>

</ul>

<script>
  let sonuc;

  let taskList = document.getElementsByClassName("task");

  for (let task of taskList) {
    task.style.fontSize = "50px";
    task.style.color = "red";
  }
</script>

或者使用 i 的传统循环>

<ul id="task-list">
  <li class="task">Gorev1</li>
  <li class="task">Gorev2</li>
  <li class="task">Gorev3</li>
  <li class="task">Gorev4</li>
  <li class="task">Gorev5</li>

</ul>

<script>
  let sonuc;

  let taskList = document.getElementsByClassName("task");

  for (let i = 0; i < taskList.length; i++) {
    taskList[i].style.fontSize = "50px";
    taskList[i].style.color = "red";
  }
</script>