Estoy tratando de hacer referencia a mi botón (que está anidado dentro de mi encabezado/nav), para hacer un evento al hacer onclick , pero parece que no puedo hacer que funcione.
Intenté anidar getElementByName con getElementById probé algunos querySelector y querySelectorAll
Intentó:
var x = document.getElementsByClassName('hdr'); var y= x.querySelector('hdrBtns'); z = y.getElementById('singUp');Intentó:
const brt = document.querySelectorAll('.hdr .hdrBtns'); const dac = brt.getElementById('signUp');Código debajo:
<body> <header class="hdr"> <div class="hLogo"> <h1> Test </h1> </div> <nav class="hdrBtns"> <button id="singUp">Sign Up</button> <button id="singIN">Sign In</button> </nav> </header> <script src="./script.js"></script> </body>La lista deNodeList devuelta por Element#querySelectorAll() o getElementsByClassName() no tiene métodos que tienen otros elementos, como getElementById() o querySelector() .
Suponiendo que solo tiene un Elemento con su ID particular, como debería tener, solo seleccionar el elemento por esto funcionará:
let btn = document.querySelector("#singUp") btn.addEventListener("click", () => alert("test")) <header class="hdr"> <div class="hLogo"> <h1> Test </h1> </div> <nav class="hdrBtns"> <button id="singUp">Sign Up</button> <button id="singIN">Sign In</button> </nav> </header>Muchas maneras de hacer eso. Pero si está buscando un elemento que ya tiene una id , entonces sería mejor usar la getElementByID() . De lo contrario, puede usar querySelector de muchas maneras diferentes.
const btns = document.querySelectorAll('.hdr nav button'); let id1 = btns[0].getAttribute('id'); let id2 = btns[1].getAttribute('id'); console.log('v1',id1, id2) const b1 = document.querySelector('.hdr nav button:first-child'); const b2 = document.querySelector('.hdr nav button:last-child'); console.log('v2', b1.getAttribute('id'), b2.getAttribute('id')); const b3 = document.getElementById('singUp'); const b4 = document.querySelector('#singIN'); console.log('v3', b3.getAttribute('id'), b4.getAttribute('id')); <body> <header class="hdr"> <div class="hLogo"> <h1> Test </h1> </div> <nav class="hdrBtns"> <button id="singUp">Sign Up</button> <button id="singIN">Sign In</button> </nav> </header> <script src="./script.js"></script> </body>Simplemente tienes que usar este código:
var signUp = document.getElementById('signUp'); signUp.addEventListener('click', () => { // Do something... });