I am making a button to be able to download an image from a gallery. The button appears inside a modal. To verify that the event is being called correctly use Console.log("evento funcionando")
. The problem is that when I click on the Download button, said event does not seem to be working since the message does not appear directly in the console.
This is the modal:
const btnDownload = document.getElementById('#btnDownload');
btnDownload.addEventListener('click', function (event) {
console.log("evento funcionando");
})
<div class="overlay">
<div class="slideshow">
<button class="btn" id="btnDownload"><i class="fa fa-download"></i> Download</button>
<span class="btn_cerrar">×</span>
<div class="botones adelante">
<i class="mdi mdi-arrow-right-circle-outline"></i>
</div>
<div class="botones atras">
<i class="mdi mdi-arrow-left-circle-outline"></i>
</div>
<img src="" id="img_slideshow"/>
</div>
</div>
I already used this same method to display the Modal
, so in theory it should work.
I must have something wrong here, since not even with the solutions they gave me (which I am very grateful for) I could solve it
This is all my code:
document.addEventListener('DOMContentLoaded', function () {
let imagenes = [
{ img: '/imgAndroid/Celular.jpg' },
{ img: '/imgAndroid/Taza.jpg' },
{ img: '/imgAndroid/Horno.jpg' },
{ img: '/imgAndroid/TV.jpg' },
{ img: '/imgAndroid/Monitor.jpg' },
{ img: '/imgAndroid/Notebook.jpg' },
{ img: '/imgAndroid/PanelSolar.jpg' },
{ img: '/imgAndroid/Teclado.jpg' },
{ img: '/imgAndroid/Samsung.jpg' },
{ img: '/imgAndroid/Mouse.jpg' },
]
let contador = 0;
const contenedor = document.querySelector('.slideshow');
const overlay = document.querySelector('.overlay');
const imagenesTd = document.querySelectorAll('.galeria img');
const img_slideshow = document.querySelector('.slideshow img');
const btnDownload = document.getElementById('btnDownload');
contenedor.addEventListener('click', function (event) {
let atras = contenedor.querySelector('.atras'),
adelante = contenedor.querySelector('.adelante'),
img = contenedor.querySelector('img'),
tgt = event.target
if (tgt == atras) {
if (contador > 0) {
img.src = imagenes[contador - 1].img
contador--
} else {
img.src = imagenes[imagenes.length - 1].img
contador = imagenes.length - 1
}
} else if (tgt == adelante) {
if (contador < imagenes.length - 1) {
img.src = imagenes[contador + 1].img
contador++
} else {
img.src = imagenes[0].img
contador = 0
}
}
})
Array.from(imagenesTd).forEach(img => {
img.addEventListener('click', event => {
const imagenSeleccionada = +event.target.dataset.imgMostrar
img_slideshow.src = imagenes[imagenSeleccionada].img
contador = imagenSeleccionada
overlay.style.opacity = 1
overlay.style.visibility = 'visible'
})
})
document.querySelector('.btn_cerrar').addEventListener('click', () => {
overlay.style.opacity = 0
overlay.style.visibility = 'hidden'
})
btnDownload.addEventListener('click', function (event) {
console.log("evento funcionando");
})
})
<body>
<div class="overlay">
<div class="slideshow">
<button class="btn" id="btnDownload"><i class="fa fa-download"></i> Download</button>
<span class="btn_cerrar">×</span>
<div class="botones adelante">
<i class="mdi mdi-arrow-right-circle-outline"></i>
</div>
<div class="botones atras">
<i class="mdi mdi-arrow-left-circle-outline"></i>
</div>
<img src="" id="img_slideshow"/>
</div>
</div>
<div class="container">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>CUIT / DNI</th>
<th>Número de remito</th>
<th>Número de pedido</th>
<th>Monto</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
<td>$16167171</td>
</tr>
</tbody>
</table>
<section class="galeria">
<div class="columnaPedido">
<img class="imgPedido" src="~/imgAndroid/Celular.jpg" data-img-mostrar="0"/>
<img class="imgPedido" src="~/imgAndroid/Taza.jpg" data-img-mostrar="1"/>
</div>
<div class="columnaPedido">
<img class="imgPedido" src="~/imgAndroid/Horno.jpg" data-img-mostrar="2"/>
<img class="imgPedido" src="~/imgAndroid/TV.jpg" data-img-mostrar="3"/>
</div>
<div class="columnaPedido">
<img class="imgPedido" src="~/imgAndroid/Monitor.jpg" data-img-mostrar="4"/>
<img class="imgPedido" src="~/imgAndroid/Notebook.jpg" data-img-mostrar="5"/>
</div>
<div class="columnaPedido">
<img class="imgPedido" src="~/imgAndroid/PanelSolar.jpg" data-img-mostrar="6"/>
<img class="imgPedido" src="~/imgAndroid/Teclado.jpg" data-img-mostrar="7"/>
</div>
<div class="columnaPedido">
<img class="imgPedido" src="~/imgAndroid/Samsung.jpg" data-img-mostrar="8"/>
<img class="imgPedido" src="~/imgAndroid/Mouse.jpg" data-img-mostrar="9"/>
</div>
</section>
</div>
<script src="~/js/main.js"></script>
</body>
The problem is that when selecting the element by id it should be like this:
I leave you the following example:
Don't mix jquery with pure js. You get the ID without it
#
in that getElementById method