tengo un problema con un evento click que estoy creando
var o = {
categorias: document.querySelectorAll(".categorias-tmc"),
productos: document.querySelectorAll("#productos-tmc div"),
cat: null,
}
var m = {
inicio: function(){
for(var i = 0; i < o.categorias.length;i++){
o.categorias[i].addEventListener("click", m.seleccion)
}
},
seleccion: function(e){
o.cat = e.target.getAttribute("cat"),
console.log(o.cat)
}
}
m.inicio();
El problema es que en el HTML dentro de el div tengo un img que al dar clic no reproduce el código. Gracias.
Hola, que tal gracias a todos por sus respuestas, a continuacion el codigo html y css
<div>
<div class="categorias-tmc column one-sixth" cat="alimenticios">
<img src="" alt="productos alimenticios">
<h2>PRODUCTOS ALIMENTICIOS</h2>
</div>
<div class="categorias-tmc column one-sixth" cat="belleza">
<img src="" alt="belleza y salud">
<h2>BELLEZA Y SALUD</h2>
</div>
<div class="categorias-tmc column one-sixth" cat="libros">
<img src="" alt="libros y gadgets">
<h2>LIBROS Y GADGETS</h2>
</div>
<div class="categorias-tmc column one-sixth" cat="accesorios">
<img src="" alt="ropa y accesorios">
<h2>ROPA Y ACCESORIOS</h2>
</div>
<div class="categorias-tmc column one-sixth" cat="artesanales">
<img src="" alt="productos artesanales">
<h2>PRODUCTOS ARTESANALES</h2>
</div>
<div class="categorias-tmc column one-sixth">
<img src="" alt="regalos">
<h2>OH!!!</h2>
</div>
</div>
.categorias-tmc {
box-shadow: 0 0 6px #0000003b;
background: white;
transition: 0.2s ease;
min-height: 230px;
cursor: pointer;
}
.categorias-tmc:hover {
transform: scale(1.1);
}
.categorias-tmc h2 {
font-size: 18px;
line-height: 18px;
}
.categorias-tmc img {
width: 100px;
margin-bottom: 30px;
}
.categorias-tmc img {
width: 100px;
margin: 30px 0;
}
.categorias-tmc:nth-child(odd) h2 {
color: #53c9ff;
}
.categorias-tmc:nth-child(even) h2 {
color: #451490;
}
.no-margin-h .one-sixth.column {
width: 16.666%;
}
disculpen si estoy usando la plataforma mal realmente soy nuevo, un saludo !