将 js onclick 功能添加到 html menuitem 下拉菜单答案

【问题标题】：Adding js onclick functionality to an html menuitem dropdown menu将 js onclick 功能添加到 html menuitem 下拉菜单
【发布时间】：2021-11-17 12:19:51
【问题描述】：

我正在尝试将 onclick 功能添加到我发现的精美下拉菜单模板中，以便当您从菜单中进行选择时，为 img 选择新的源和 alt 标签以显示不同的狗品种。

未修改的原始代码在这里https://codepen.io/sean_codes/pen/WdzgdY，下面是我的mod尝试。我没有包括我修改后的 ccs，因为它很大，并且与原版相差不大。我知道 menuitems 已被淘汰，但由于某种原因，这种配置似乎仍然可以在多个浏览器中使用。

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>

// 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";
}

【问题讨论】：

那么问题出在哪里？

标签： javascript css dropdown menuitem

【解决方案1】：

在调用 Javascript 函数时，您只是缺少 ()：

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

【讨论】：