Meu código não funciona
Esse mini projeto que eu fiz deveria mostrar uma imagem grande e cinco imagens menores logo embaixo, mas isso não ocorre, só a primeira imagem é mostrada. Eu realmente não sei o porque disso, já analisei e comparei o meu código varias vezes com a versão finalizada e estão exatamente iguais. O único erro que realmente aparece é na aba dev tools no browser (chrome), a seguinte mensagem é exibida: Failed to load resource: the server responded with a status of 404 (Not Found).
Se alguém puder dar um olhada no código e me ajudar desde já agradeço.
Talvez esse seja um erro bobo, mas eu estou começando a aprender agora, então ainda estou na fase que programação parece um bicho de 7 cabeças.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>s
<script src="main.js"></script>
</body>
</html>
JS:
const displayedImage = document.querySelector(''.displayed-img'');
const thumbBar = document.querySelector(''.thumb-bar'');
const btn = document.querySelector(''button'');
const overlay = document.querySelector(''.overlay'');
/* Declaring the array of image filenames */
const images = [''pic1.jpg'', `pic2.jpg`, `pic3.jpg`, `pic4.jpg`, `pic5.jpg`];
/* Looping through images */
for (const images of images) {
const newImage = document.createElement(''img'');
newImage.setAttribute(''src'', `./images/$`);
thumbBar.appendChild(newImage);
newImage.addEventListener(''click'', e => displayedImage.src = e.target.src);
}
/* Wiring up the Darken/Lighten button */
btn.addEventListener(''click'', () => {
const btnClass = btn.getAttribute(''class'');
if (btnClass === ''dark'') {
btn.setAttribute(''class'',''light'');
btn.textContent = ''Lighten'';
overlay.style.backgroundColor = ''rgba(0,0,0,0.5)'';
} else {
btn.setAttribute(''class'',''dark'');
btn.textContent = ''Darken'';
overlay.style.backgroundColor = ''rgba(0,0,0,0)'';
}
});
Se alguém puder dar um olhada no código e me ajudar desde já agradeço.
Talvez esse seja um erro bobo, mas eu estou começando a aprender agora, então ainda estou na fase que programação parece um bicho de 7 cabeças.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>s
<script src="main.js"></script>
</body>
</html>
JS:
const displayedImage = document.querySelector(''.displayed-img'');
const thumbBar = document.querySelector(''.thumb-bar'');
const btn = document.querySelector(''button'');
const overlay = document.querySelector(''.overlay'');
/* Declaring the array of image filenames */
const images = [''pic1.jpg'', `pic2.jpg`, `pic3.jpg`, `pic4.jpg`, `pic5.jpg`];
/* Looping through images */
for (const images of images) {
const newImage = document.createElement(''img'');
newImage.setAttribute(''src'', `./images/$`);
thumbBar.appendChild(newImage);
newImage.addEventListener(''click'', e => displayedImage.src = e.target.src);
}
/* Wiring up the Darken/Lighten button */
btn.addEventListener(''click'', () => {
const btnClass = btn.getAttribute(''class'');
if (btnClass === ''dark'') {
btn.setAttribute(''class'',''light'');
btn.textContent = ''Lighten'';
overlay.style.backgroundColor = ''rgba(0,0,0,0.5)'';
} else {
btn.setAttribute(''class'',''dark'');
btn.textContent = ''Darken'';
overlay.style.backgroundColor = ''rgba(0,0,0,0)'';
}
});
Alisson Dias
Curtidas 0
Melhor post
Diego Marinho
14/03/2022
Amigão... o problema do seu código não renderizar o restante das imagens está nessa parte do código :
O correto é :
Além de está pondo o mesmo nome das variáveis dentro do for, você está novamente declarando uma variável já declarada como constante.
Acho que mudando essa parte do código, irá renderizar as imagens normalmente.
for (const images of images) { .....
O correto é :
for ( i of images) { .....
Além de está pondo o mesmo nome das variáveis dentro do for, você está novamente declarando uma variável já declarada como constante.
Acho que mudando essa parte do código, irá renderizar as imagens normalmente.
GOSTEI 1
Mais Respostas
Diego Marinho
30/01/2022
Ah.... e você terá que modificar o setAtribute do newImage, pois a variável correta a ser setada nele é a variável : i
Pronto... Acho que agora as imagens serão listadas normalmente
for ( i of images) {
const newImage = document.createElement(''''img'''');
modificar aqui tmb --------> newImage.setAttribute(''''src'''', `./images/${ i }`);
....
Pronto... Acho que agora as imagens serão listadas normalmente
GOSTEI 1
Diego Marinho
30/01/2022
Ah.... e você terá que modificar o setAtribute do newImage, pois a variável correta a ser setada nele é a variável : i
Pronto... Acho que agora as imagens serão listadas normalmente
for ( i of images) {
const newImage = document.createElement(''''''''img'''''''');
modificar aqui tmb --------> newImage.setAttribute(''''''''src'''''''', `./images/${ i }`);
Pronto... Acho que agora as imagens serão listadas normalmente
GOSTEI 1
Diego Marinho
30/01/2022
essa aspas, nos posts acima, no img e no src , ignora , isso ai é erro de postagem na devmedia .
Vou tentar pôr a parte do código de listagem de imagens, corrigido , pra vê se esses erros saem :
Segue o código :
[code=js
/* Declaring the array of image filenames */
const images = [''pic1.jpg'', `pic2.jpg`, `pic3.jpg`, `pic4.jpg`, `pic5.jpg`];
/* Looping through images */
for ( i of images) {
const newImage = document.createElement('img');
newImage.setAttribute('src', `${ i }`);
thumbBar.appendChild(newImage);
newImage.addEventListener('click', e => displayedImage.src = e.target.src);
}
][/code]
Vou tentar pôr a parte do código de listagem de imagens, corrigido , pra vê se esses erros saem :
Segue o código :
[code=js
/* Declaring the array of image filenames */
const images = [''pic1.jpg'', `pic2.jpg`, `pic3.jpg`, `pic4.jpg`, `pic5.jpg`];
/* Looping through images */
for ( i of images) {
const newImage = document.createElement('img');
newImage.setAttribute('src', `${ i }`);
thumbBar.appendChild(newImage);
newImage.addEventListener('click', e => displayedImage.src = e.target.src);
}
][/code]
GOSTEI 0
Diego Marinho
30/01/2022
essa aspas, nos posts acima, no img e no src , ignora , isso ai é erro de postagem na devmedia .
Vou tentar pôr a parte do código de listagem de imagens, corrigido , pra vê se esses erros saem :
Segue o código :
Vou tentar pôr a parte do código de listagem de imagens, corrigido , pra vê se esses erros saem :
Segue o código :
/* Declaring the array of image filenames */
const images = [''pic1.jpg'', `pic2.jpg`, `pic3.jpg`, `pic4.jpg`, `pic5.jpg`];
/* Looping through images */
for ( i of images) {
const newImage = document.createElement('img');
newImage.setAttribute('src', `${ i }`);
thumbBar.appendChild(newImage);
newImage.addEventListener('click', e => displayedImage.src = e.target.src);
}
GOSTEI 0
Diego Marinho
30/01/2022
Como suas imagens estão dentro da pasta "imagem", ai você coloca o prefixo correto --- que deve ficar assim ----> newImage.setAttribute('src', `./images/${ i }`);
GOSTEI 0