[ANSWERED] javascript – Can you for loop through
elements and apply a mouseover function?

Question 1

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>

Question 2

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>

Question 3

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>

Bollate

[ANSWERED] javascript – Can you for loop through
elements and apply a mouseover function?

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Vitalij Kornijenko

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate