为HTML下拉菜单menuitem添加JS onclick功能实现犬种图片切换

我想给找到的精美下拉菜单模板添加onclick点击功能，实现从菜单选中选项时，修改img标签的src和alt属性，展示不同犬种的图片。

我没有附上修改后的CSS，因为代码量很大，且和原版差异不大。我知道menuitem元素已被弃用，但目前该配置在多个浏览器中仍可正常运行。

原始尝试代码 #

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>宠物选择</a>
                    <menu>
                        <menuitem>
                            <a>品种</a>
                            <menu>
                                <menuitem>
                                    <a>犬类</a>
                                    <menu>
                                        <menuitem id="german_shepherd" onclick="german_shepherd_select"><a>德国牧羊犬</a></menuitem>
                                        <menuitem id="golden_retriever" onclick="golden_retriever_select"><a>金毛寻回犬</a></menuitem>
                                    </menu>
                                </menuitem>
                            </menu>
                        </menuitem>
                    </menu>
                </menuitem>
            </menu>
        </nav>

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

</body>
</html>

JS #

// 宠物选择命令
function german_shepherd_select() {
    document.getElementById("pet_selection_img").src = "german_shepherd.png";
    document.getElementById("pet_selection_img").alt = "这是一只德国牧羊犬";
}

function golden_retriever_select() {
    document.getElementById("pet_selection_img").src = "golden_retiever.png";
    document.getElementById("pet_selection_img").alt = "这是一只金毛寻回犬";
}

问题修复 #

问题定位 #

• 点击事件无法触发的核心原因是onclick属性填写的函数名缺少执行括号，浏览器只会读取函数引用，不会主动执行函数
• 金毛寻回犬的图片路径拼写错误，少了一个字母r，会导致图片加载失败

修复后代码调整 #

HTML修改

仅调整menuitem的onclick属性即可：

<menuitem id="german_shepherd" onclick="german_shepherd_select()"><a>德国牧羊犬</a></menuitem>
<menuitem id="golden_retriever" onclick="golden_retriever_select()"><a>金毛寻回犬</a></menuitem>

JS修改

修正图片路径拼写：

// 宠物选择命令
function german_shepherd_select() {
    document.getElementById("pet_selection_img").src = "german_shepherd.png";
    document.getElementById("pet_selection_img").alt = "这是一只德国牧羊犬";
}

function golden_retriever_select() {
    document.getElementById("pet_selection_img").src = "golden_retriever.png";
    document.getElementById("pet_selection_img").alt = "这是一只金毛寻回犬";
}

优化方案 #

后续新增犬种无需重复编写新函数，可使用通用函数简化逻辑：

<!-- 菜单项示例 -->
<menuitem data-img="german_shepherd.png" data-alt="这是一只德国牧羊犬" onclick="switchPetImg(this)">
  <a>德国牧羊犬</a>
</menuitem>
<menuitem data-img="golden_retriever.png" data-alt="这是一只金毛寻回犬" onclick="switchPetImg(this)">
  <a>金毛寻回犬</a>
</menuitem>

// 通用切换函数
function switchPetImg(item) {
    const petImg = document.getElementById("pet_selection_img")
    petImg.src = item.dataset.img
    petImg.alt = item.dataset.alt
}

内容的提问来源于stack exchange，提问作者Jeffrey