Meu c�digo n�o funciona

30/01/2022

Visual Studio Code HTML5 Front-end Web JavaScript Web

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

Curtir t�pico + 0

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

Responder

Gostei + 1

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

Gostei + 1

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

Gostei + 1

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

Gostei + 0

14/03/2022

Diego Marinho




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

Gostei + 0

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

Gostei + 0