Why do I get cannot set properties of undefined error

Question

I try to give font Size to all of my <li/> elements but I get an error and I don't know why.

Error:

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

Here is my code, please help me in your known

<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

your for loop is wrong. Try this:

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

Answer 2

I don't know if you absolutely need to use javascript for your case (and please, feel free to comment under this answer if that's the case), but I think you could achieve the same result by using 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 loop does not only return indices but also some extra properties which make your data invalid.

You can verify all values in in loop by console.log like below

<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>

In your case, your loop has been stopped at length.

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

You can use of loop instead

<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>

Or a traditional loop with 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>

Answer 4

<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>