I tried to target each word by splitting it, putting it into an array, and then changing the style directly, but that doesn't seem to work. what am i missing?
const highlight= ()=>{
let text = document.querySelector('main').textContent.split(' ');
for (const item of text) {
item.classList.add('highlight')
}
}
.highlight{
color: yellowgreen;
}
<main onmouseover="highlight()">
<p>I am passionate about web design and derive joy in problem solving as well as breathing life into web projects.</p>
<p>My goal is to broaden my knowledge of web development with access to useful resources such as videos, apps, etc; And make use of the opportunity to interact with various other up and coming web developers as well as experienced web developers who would be able to shed more light on the path that I seek to follow.
</p>
</main>
The textContent attribute returns a string value. Therefore, after the split, you have an array of simple strings, that you are iterating on.
Inside the loop, item will be a simple string, and (1) it does not have a classList attibute, nor it may be styled, and (2) in any case, you are not modifying the content of <main>, but a separate value.
You should first convert each word into a <span>word</span>, preserving the spaces (that you don't want to highlight) and the formatting (e.g., the <p> tags).
After that, it should be easy to apply the desired style to the main span selector.