Meu código não funciona

30/01/2022

14

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)'';
}
});
Alisson Dias

Alisson Dias

Responder

Post mais votado

14/03/2022

Amigão... o problema do seu código não renderizar o restante das imagens está nessa parte do código :

  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.

Diego Marinho

Diego Marinho
Responder

Mais Posts

14/03/2022

Diego Marinho

Ah.... e você terá que modificar o setAtribute do newImage, pois a variável correta a ser setada nele é a variável : i



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
Responder

14/03/2022

Diego Marinho

Ah.... e você terá que modificar o setAtribute do newImage, pois a variável correta a ser setada nele é a variável : i



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
Responder

14/03/2022

Diego Marinho

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]

Responder

14/03/2022

Diego Marinho

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 :




/* 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);

}




Responder

15/03/2022

Diego Marinho

Como suas imagens estão dentro da pasta "imagem", ai você coloca o prefixo correto --- que deve ficar assim ----> newImage.setAttribute('src', `./images/${ i }`);
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar