Adding js onclick functionality to an html menuitem dropdown menu

Question

I am trying to add onclick functionality to a fancy drop down menu template I found so that when you make a selection from the menu, new source and alt tags are selected for an img to display different dog breeds.

The original unmodified code is here https://codepen.io/sean_codes/pen/WdzgdY and my mod attempts below. I did not include my modified ccs because it is massive and doesn't diverge that much from the original. I know menuitems have been phased out, but this configuration still seems to work for some reason across multiple browsers.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="pets.css" />
    <script src="pets.js"></script>
</head>
<body>
    <div class="container">
        <nav class="petmenu">
            <menu>
                <menuitem>
                    <a>Pet Selection</a>
                    <menu>
                        <menuitem>
                            <a>Breed</a>
                            <menu>
                                <menuitem>
                                    <a>Dog</a>
                                    <menu>
                                        <menuitem id="german_shepherd" onclick="german_shepherd_select"><a>German Shepherd</a></menuitem>
                                        <menuitem id="golden_retriever" onclick="golden_retriever_select"><a>Golden Retriever</a></menuitem>
                                    </menu>
                                </menuitem>
                            </menu>
                        </menuitem>
                    </menu>
                </menuitem>
            </menu>
        </nav>

        <img class ="petselection" id ="pet_selection_img" src="" alt="">
    </div>

</body>
</html>

JS

// Pet Selection Commands

function german_shepherd_select() {
    document.getElementById("pet_selection_img").src = "german_shepherd.png";
    document.getElementById("pet_selection_img").alt = "This is a German Shepherd";
}

function golden_retriever_select() {
    document.getElementById("pet_selection_img").src = "golden_retiever.png";
    document.getElementById("pet_selection_img").alt = "This is a Golden Retriever";
}

So what is the problem?

Joshua
– Joshua

2021-11-17 12:26:03 +00:00
Commented Nov 17, 2021 at 12:26 — Joshua
– Joshua, Commented Nov 17, 2021 at 12:26

skashi · Accepted Answer · 2021-11-17 14:11:08Z

1

You are just missing the () when calling the Javascript function:

 <menuitem id="german_shepherd" onclick="german_shepherd_select()">

answered Nov 17, 2021 at 14:11

skashi

3352 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding js onclick functionality to an html menuitem dropdown menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related