Estoy usando un conjunto de datos para obtener un elemento agregando un controlador de eventos en el elemento principal del botón, luego asigno el valor de los datos del elemento 'clic' a una variable.
Pero no funciona, ¿qué hice mal? A continuación se muestra el código:
const ct = document.querySelector('.main-01'); const ctt = document.querySelector('.main-02'); ct.addEventListener('click', function(e) { const check= ctt.querySelector('[data-test = e.target.dataset.test]'); console.log(check) }); .main-01, .main-02 { display: flex; flex-direction: row; gap: 15px; } .main-01 { width: 570px; justify-content: center; margin-bottom: 15px; } .test { width: 180px; height: 90px; background-color: orange; } <div class="main-01"> <button data-test="1">button-01</button> <button data-test="2">button-02</button> <button data-test="3">button-03</button> </div> <div class="main-02"> <div data-test="1" class="test"></div> <div data-test="2" class="test"></div> <div data-test="3" class="test"></div> </div>Use una sintaxis como: const check= ctt.querySelector('[data-test="'+e.target.dataset.test+'"]');
const ct = document.querySelector('.main-01'); const ctt = document.querySelector('.main-02'); const test = document.querySelector('.test'); ct.addEventListener('click', function(e) { const check= ctt.querySelector('[data-test="'+e.target.dataset.test+'"]'); console.log(check) }); .main-01, .main-02 { display: flex; flex-direction: row; gap: 15px; } .main-01 { width: 570px; justify-content: center; margin-bottom: 15px; } .test { width: 180px; height: 90px; background-color: orange; } <div class="main-01"> <button data-test="1">button-01</button> <button data-test="1">button-02</button> <button data-test="1">button-03</button> </div> <div class="main-02"> <div data-test="1" class="test"></div> <div data-test="2" class="test"></div> <div data-test="3" class="test"></div> </div>Pero no funciona, ¿qué hice mal?
El mensaje de error ya te da la respuesta. Utiliza un selector incorrecto para buscar el elemento en su dom:
"SyntaxError: Element.querySelector: '[data-test = e.target.dataset.test]' no es un selector válido",
En su caso, ya pasa el evento de clic a la función de manejo. Entonces tendrá acceso al elemento en el que hizo clic utilizando e.target . Por favor, eche un vistazo al siguiente ejemplo.
const ct = document.querySelector('.main-01'); const ctt = document.querySelector('.main-02'); ct.addEventListener('click', function(e) { const item = parseInt(e.target.getAttribute('data-test')); console.log("=>", item); ctt.querySelector("div:nth-child("+ item +")").innerHTML = "Hello " + item; }); .main-01, .main-02 { display: flex; flex-direction: row; gap: 15px; } .main-01 { width: 570px; justify-content: center; margin-bottom: 15px; } .test { width: 180px; height: 90px; background-color: orange; } <div class="main-01"> <button data-test="1">button-01</button> <button data-test="2">button-02</button> <button data-test="3">button-03</button> </div> <div class="main-02"> <div data-test="1" class="test"></div> <div data-test="2" class="test"></div> <div data-test="3" class="test"></div> </div>Utilice siempre la propiedad del conjunto de dataset . Cuando define cualquier propiedad data-xxxx-xxxx , se puede acceder a ella en notación camelCase .
En consecuencia, puede construir elementos HTML y actualizarlos en el evento de 'clic' deseado.
// eg data-date-of-birth => dateOfBirth const el = document.querySelector('#user'); // GET the current element console.log(el.dataset.user) // Access with existing value el.dataset.user = 'XYZ'; // UPDATE the existing value. console.log(el.dataset.user) // PRINT new value. <div id="user" data-id="1234567890" data-user="johndoe"> const srcEl = document.querySelector(".main-01"); srcEl.addEventListener('click', function(event) { const btnIndex = event.target.dataset.test; // array index starts with 0 hence substract -1 from btnIndex document.querySelector(".main-02").children[btnIndex-1].innerHTML = 'NEW TEXT'; }); <div class="main-01"> <button class="button" data-test="1">button-01</button> <button class="button" data-test="2">button-02</button> <button class="button" data-test="3">button-03</button> </div> <div class="main-02"> <div data-test="1" class="test">1</div> <div data-test="2" class="test">2</div> <div data-test="3" class="test">3</div> </div>