parece que, cuando se agrega una etiqueta div entre el siguiente código:
<div id="fixed-drop"> <button type="button" class="dropdown-btn">Show;</button> </div>El siguiente código Javascript no puede obtener el artículo, fallando con
Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')Pero si se elimina esa etiqueta div, javascript puede tomar el botón: probé los siguientes códigos js:
var dropdown = document.getElementById("fixed-drop").document.getElementsByClassName("dropdown-btn"); var dropdown = document.getElementById("fixed-drop")[0].document.getElementsByClassName("dropdown-btn");Sin div esto funciona:
var dropdown = document.getElementsByClassName("dropdown-btn");Document.querySelector() se puede usar para seleccionar el elemento secundario:
var dropdown = document.getElementById("fixed-drop").querySelector('.dropdown-btn'); dropdown.addEventListener('click', function() { console.log('Clicked'); }); <div id="fixed-drop"> <button type="button" class="dropdown-btn">Show</button> </div>El problema ocurre cuando primero busca el div con document.getElementById("fixed-drop") . Si lo elimina, la función devolverá nulo. y la siguiente función no puede acceder a nulo.
Solución Use querySelector en lugar de encadenar funciones getElementById().
const btn1 = document.querySelector('.dropdown-btn') console.log('without select parent div:',btn1) const btn2 = document.querySelector('#fixed-drop .dropdown-btn') console.log('with select parent div:',btn2) <div id="fixed-drop"> <button type="button" class="dropdown-btn">Show;</button> </div> var dropdown = document.getElementById("fixed-drop").document.getElementsByClassName("dropdown-btn");""" document.getElementById("fixed-drop") """ este es un elemento. No puede element.getElementsByClassName("dropdown-btn") en el elemento.
Puede utilizar querySelector.
var dropdown = querySelector('#fixed-drop .dropdown-btn');