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

Question

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

原始的未mod化代码在这里https://codepen.io/sean_codes/pen/WdzgdY，下面是我的mod尝试。我没有包括我的 modified ccs 因为它很大而且与原始版本没有太大区别。我知道菜单项已被淘汰，但出于某种原因，此配置似乎仍然适用于多种浏览器。

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

Answer 1

你只是在调用 Javascript 函数时错过了 ():

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

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

Adding js onclick functionality to an html menuitem dropdown menu

javascript

css

menuitem

dropdown