Estoy tratando de agregar la funcionalidad onclick a una elegante plantilla de menú desplegable que encontré para que cuando haga una selección del menú, se seleccionen nuevas fuentes y etiquetas alt para una imagen para mostrar diferentes razas de perros.
El código original sin modificar está aquí https://codepen.io/sean_codes/pen/WdzgdY y mis intentos de modificación a continuación. No incluí mi ccs modificado porque es enorme y no difiere mucho del original. Sé que los elementos del menú se han eliminado, pero esta configuración todavía parece funcionar por algún motivo en varios navegadores.
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"; }Solo te falta el () al llamar a la función Javascript:
<menuitem id="german_shepherd" onclick="german_shepherd_select()">