Modifying the Color of Array Elements using JavaScript

Question

Modifying the Color of Array Elements using JavaScript

When attempting to change text color on hover, an error message is displayed:

Uncaught TypeError: Cannot read property 'style' of undefined at HTMLDivElement

<a data-tab="Tab 1">
  <div class="tab-link__text">Tab1</div>
</a>
<a data-tab="Tab 2">
  <div class="tab-link__text">Tab2</div>
</a>


 let tabLinks = document.getElementsByClassName('tab-link__text');
 let tabLinksArr = Array.prototype.slice.call( tabLinks )

  tabLinksArr[0].style.color = "red"; //This successfully changes the color

  for (i=0; i < tabLinksArr.length; i++) {
    tabLinksArr[i].addEventListener('mouseover', function(){
        tabLinksArr[i].style.color = "red"; //However, this does not work
    });
  }

The styling works fine when outside the for loop, but encounters issues inside.

javascript typeerror

Answer 1

Answer №1

One issue to note in your code snippet is that the variable i is set to 2 after the for loop finishes, causing an error when trying to set the style of tabLinks[2], which doesn't exist. To fix this, it's important to keep a reference to the correct tabLink:

let tabLinks = document.getElementsByClassName('tab-link__text');

for (let i = 0; i < tabLinks.length; i++) {
  let tabLink = tabLinks[i];
  tabLink.addEventListener('mouseover', () => {
    tabLink.style.color = "red";
  });
}

<a data-tab="Tab 1">
  <div class="tab-link__text">Tab1</div>
</a>
<a data-tab="Tab 2">
  <div class="tab-link__text">Tab2</div>
</a>

Additionally, consider the following:

1) Using single quotes ' instead of double quotes "

2) Utilizing arrow functions => rather than function keyword

3) Declare variables with let i

4) Prefer using array.forEach() or for(el of array) over

for(let i = 0; i < array.length; i++)

5) Modify element classes instead of styles directly.

let tabLinks = document.getElementsByClassName('tab-link__text');
[...tabLinks].forEach(tabLink =>
  tabLink.addEventListener('mouseover', () =>
    tabLink.classList.add('hovered')));

.hovered {
  color: red;
}

<a data-tab="Tab 1">
  <div class="tab-link__te`xt">Tab1</div>
</a>
<a data-tab="Tab 2">
  <div class="tab-link__text">Tab2</div>
</a>

Answer 2

One issue to note in your code snippet is that the variable i is set to 2 after the for loop finishes, causing an error when trying to set the style of tabLinks[2], which doesn't exist. To fix this, it's important to keep a reference to the correct tabLink:

let tabLinks = document.getElementsByClassName('tab-link__text');

for (let i = 0; i < tabLinks.length; i++) {
  let tabLink = tabLinks[i];
  tabLink.addEventListener('mouseover', () => {
    tabLink.style.color = "red";
  });
}

<a data-tab="Tab 1">
  <div class="tab-link__text">Tab1</div>
</a>
<a data-tab="Tab 2">
  <div class="tab-link__text">Tab2</div>
</a>

Additionally, consider the following:

1) Using single quotes ' instead of double quotes "

2) Utilizing arrow functions => rather than function keyword

3) Declare variables with let i

4) Prefer using array.forEach() or for(el of array) over

for(let i = 0; i < array.length; i++)

5) Modify element classes instead of styles directly.

let tabLinks = document.getElementsByClassName('tab-link__text');
[...tabLinks].forEach(tabLink =>
  tabLink.addEventListener('mouseover', () =>
    tabLink.classList.add('hovered')));

.hovered {
  color: red;
}

<a data-tab="Tab 1">
  <div class="tab-link__te`xt">Tab1</div>
</a>
<a data-tab="Tab 2">
  <div class="tab-link__text">Tab2</div>
</a>

Answer 3

Answer №2

The reason for this issue is that the variable i in the function context becomes equal to tabLinks.length since the function is called before the for loop completes. To troubleshoot, you can use console.log to check the value of the i variable in your event listener. Since tabLinks[tabLinks.length] does not exist (the last index should be

tabLinks[tabLinks.length - 1]</code), you encounter the error <code>Cannot read property 'style' of undefined

. Therefore, you should avoid using the i variable at this point and instead use the event target like so:

for (i=0; i < tabLinks.length; i++) {
    tabLinks[i].addEventListener('mouseover', function(e){
        e.target.style.color = "red";
    });
}

I hope this explanation helps!

Answer 4

The reason for this issue is that the variable i in the function context becomes equal to tabLinks.length since the function is called before the for loop completes. To troubleshoot, you can use console.log to check the value of the i variable in your event listener. Since tabLinks[tabLinks.length] does not exist (the last index should be

tabLinks[tabLinks.length - 1]</code), you encounter the error <code>Cannot read property 'style' of undefined

. Therefore, you should avoid using the i variable at this point and instead use the event target like so:

for (i=0; i < tabLinks.length; i++) {
    tabLinks[i].addEventListener('mouseover', function(e){
        e.target.style.color = "red";
    });
}

I hope this explanation helps!

Answer 5

Answer №3

Give this a try. I have confirmed that this code is functioning correctly.

<a data-tab="Tab 1">
  <div class="tab-link__text">Tab1</div>
</a>
<a data-tab="Tab 2">
  <div class="tab-link__text">Tab2</div>
</a>

<script>
let tabLinks = document.querySelectorAll('.tab-link__text');
tabLinks.forEach(tabLink => {
     tabLink.addEventListener('mouseover', () => {
           tabLink.style.color = "red"
     });
});
</script>

Appreciate it

Answer 6

Give this a try. I have confirmed that this code is functioning correctly.

<a data-tab="Tab 1">
  <div class="tab-link__text">Tab1</div>
</a>
<a data-tab="Tab 2">
  <div class="tab-link__text">Tab2</div>
</a>

<script>
let tabLinks = document.querySelectorAll('.tab-link__text');
tabLinks.forEach(tabLink => {
     tabLink.addEventListener('mouseover', () => {
           tabLink.style.color = "red"
     });
});
</script>

Appreciate it

Modifying the Color of Array Elements using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Issue with interactions between datepicker and jQuery dialog box

Tips for Loading a Selected Option from an Ajax Call in Angular JS on Page Load

disabling a submit button

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Six Material-UI TextFields sharing a single label

Browser lacks proper credentials for passport authentication

Registering a component in Vue.js and checking for errors in component registration

Is JavaScript not having an impact on your HTML code?

Accessing a JSON string correctly using JavascriptSerializer in JavaScript

What is the best method for injecting a factory dependency into an angular controller?

Running an express server on localhost with nginx: A step-by-step guide

Restricting the Vue for-loop results to display only the current item in use

Encountering Uncaught Runtime Error in NextJs

Pass a variable value as a parameter to a jQuery function using code-behind

Is it possible to create floating unordered lists using Bootstrap in HTML?

Unexpected Issue with JavaScript Ajax (Using jQuery.post): The Promise State Turns to "Rejected"

Is there a way to eliminate empty arrays from my data?

What is the best way to resize an image to fit its surroundings within a nested box?

Navigational menu header leads to specific location on the page

Guide on implementing factory updates to the display