Why do I get cannot set properties of undefined error-CodePudding

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 >Gorev1</li>
  <li >Gorev2</li>
  <li >Gorev3</li>
  <li >Gorev4</li>
  <li >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>

CodePudding user response：

your for loop is wrong. Try this:

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

CodePudding user response：

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 >Gorev1</li>
  <li >Gorev2</li>
  <li >Gorev3</li>
  <li >Gorev4</li>
  <li >Gorev5</li>
</ul>

CodePudding user response：

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 >Gorev1</li>
  <li >Gorev2</li>
  <li >Gorev3</li>
  <li >Gorev4</li>
  <li >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 >Gorev1</li>
  <li >Gorev2</li>
  <li >Gorev3</li>
  <li >Gorev4</li>
  <li >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 >Gorev1</li>
  <li >Gorev2</li>
  <li >Gorev3</li>
  <li >Gorev4</li>
  <li >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>

CodePudding user response：

<ul id="task-list">
  <li >Gorev1</li>
  <li >Gorev2</li>
  <li >Gorev3</li>
  <li >Gorev4</li>
  <li >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>