CODEWITHSUNDEEP
javascripthtmlloopsonmouseover
Michael Mullen
Michael Mullen

Reputation: 11

Can you for loop through <li> elements and apply a mouseover function?

Trying to make it so when you mouseover an item in the nav it becomes bold while hovering over. I know theres ways to do this in other languages but im trying to learn JS.

<body>
        <p>
        If you ask I will give you:
        </p>
        <ul id = 'nav_1'>
            <li>Some nice chocolate cake</li>
            <li>A fresh-brewed cup of coffee</li>
            <li>An honest compliment</li>
            <li>A brand new Porsche</li>
        </ul>
        <script type="text/javascript">
            "use strict";   
            const nav1 = document.getElementByID('nav_1');
            const listItems = nav1.getElementsByTagName("li");
            
            for(let i = 0;i<listItems.length;i++){
                listItems[i].onmouseover = function(){
                    document.listItems[i].style.fontWeight = "bold";
                }
                listItems[i].onmouseleave = function(){
                    document.listItems[i].style.fontWeight = "normal";
                }
            }
        </script>
    </body>

Upvotes: 1

Views: 621

Answers (2)

Paul T.
Paul T.

Reputation: 4917

There was a minor typo on getElementByID, the last letter should be lowercase d. Then remove document on the listItems variable.

As Vitalij pointed out, CSS would be a better route for the handling (no scripting would be needed), but keeping to the javascript:

"use strict";

const nav1 = document.getElementById('nav_1');
const listItems = nav1.getElementsByTagName("li");

for(let i = 0; i < listItems.length; i++){
    listItems[i].onmouseover = function(){
       listItems[i].style.fontWeight = "bold";
    }
    listItems[i].onmouseleave = function(){
       listItems[i].style.fontWeight = "normal";
    }
}
<p>
If you ask I will give you:
</p>
<ul id='nav_1'>
    <li>Some nice chocolate cake</li>
    <li>A fresh-brewed cup of coffee</li>
    <li>An honest compliment</li>
    <li>A brand new Porsche</li>
</ul>

Upvotes: 2

Vitalij Kornijenko
Vitalij Kornijenko

Reputation: 559

Hi Michael and welcome to StackOverflow.

For this I would recommend you use CSS instead of JS. It's easier and more efficient that way

#nav_1 li:hover { /* Bold li element on hoverin nav_1 elements */
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
    If you ask I will give you:
    </p>
    <ul id = 'nav_1'>
        <li>Some nice chocolate cake</li>
        <li>A fresh-brewed cup of coffee</li>
        <li>An honest compliment</li>
        <li>A brand new Porsche</li>
    </ul>
</body>
</html>

This would be the JS solution. You problem is in the callback. document does not have a variable called listItems you might have mistaken it for window. There was also a typo in getElementByID it must be getElementById, JS functions are case sensitive.

<body>
    <p>
    If you ask I will give you:
    </p>
    <ul id = 'nav_1'>
        <li>Some nice chocolate cake</li>
        <li>A fresh-brewed cup of coffee</li>
        <li>An honest compliment</li>
        <li>A brand new Porsche</li>
    </ul>
    <script type="text/javascript">
        "use strict";
        const nav1 = document.getElementById('nav_1');
        const listItems = nav1.getElementsByTagName("li");

        for(let i = 0;i<listItems.length;i++){
            listItems[i].onmouseover = function(e){
                listItems[i].style.fontWeight = "bold";
            }
            listItems[i].onmouseleave = function(e){
                listItems[i].style.fontWeight = "normal";
            }
        }
    </script>
</body>

Upvotes: 2

Related Questions