3

Estou fazendo um script para que quando cliente clicar em uma das cores que o produto tem.

inserir a descrição da imagem aqui

o produto ao lado troque a foto. Porém, como é um array de fotos preciso que cada id contenha um nome diferente. Então dentro do laço do produto adiciono a foto o id:

id="trocarimg{{$id}}"

Problema

Não consigo fazer que ele pegue esse id com o complemento da variável ex: trocarimg1 - trocarimg2 ... Meu código javascript está da seguinte maneira:

inserir a descrição da imagem aqui

aqui onde eu chamo a variável document.getElementById("trocarimg") precisaria que no trocarimg ao final aparecesse o mesmo código que a variável dentro do array pega. Se precisarem de mais informações só pedir. Obrigado.

7
  • 2
    Já tentou document.getElementById("trocarimg"+i)?
    – Sam
    6/03/2019 às 14:25
  • Oi Sam, acho até que já tinha tentado. Ele me retorna o seguinte erro Uncaught TypeError: Cannot set property 'src' of null sei que deve ser alguma coisa bem pequena mas como não sou muito bom de JS (estou estudando) não consigo ver o problema.
    – adrib
    6/03/2019 às 14:40
  • O for é executado antes ou depois dos elementos? Se for antes, realmente irá dar esse erro que vc citou mesmo.
    – Sam
    6/03/2019 às 14:43
  • Mostra o código que cria/define o elemento com a classe trocarimg 6/03/2019 às 14:45
  • Outra coisa, não use uma função dentro de um laço que não dá certo.
    – Sam
    6/03/2019 às 14:45

2 Respostas 2

0

Você está fazendo errado colocando uma função dentro de um laço for. Esse laço me parece ser bem desnecessário, inclusive.

Basta usar a função normal e concatenar o argumento i na id do elemento:

function img(i){
   document.getElementById("trocarimg"+i).src = // resto do código
}

Onde o i é um número que deverá ser enviado pelo click. Por exemplo:

onclick="img(1)"
7
  • Oi Sam, eu testei dessa forma, porém eu precisaria do laço para poder buscar dentro do array a posição da foto _ document.getElementById("trocarimg").src = '/images/'+string_array[i]['filename'];_ pelo filename dela. Também tenho o problema de ela só mudar a foto do primeiro _id("trocarimg").
    – adrib
    6/03/2019 às 16:34
  • O valor de i já busca a posição na array. Não precisa de laço.
    – Sam
    6/03/2019 às 16:38
  • Correto, estou quase haha. Consegui pegar index do array no id="trocarimg{{$i}}" junto com a função do JS que tu me ensinou ali em cima, o único problema é ainda eu acho no document.getElementById("trocarimg"+i) , dando um console.log ele pega as imagens certas, porém não muda.
    – adrib
    6/03/2019 às 16:44
  • Era pra alterar o src do elemento pelo valor achado na array. Por exemplo: <img id="trocarimg1" src="imagemX">... ao fazer document.getElementById("trocarimg"+i).src = "imagemY";, onde o valor de i seria 1, deveria trocar o src da <img>.
    – Sam
    6/03/2019 às 16:57
  • Correto Sam, no console.log() ele está fazendo bem isso. Se eu dou um console no document.getElementById("trocarimg"+i) ele me retorna o html certinho inteiro de cada item pra cada cor, se der o console em document.getElementById("trocarimg"+i).src = '/images/'+ string_array[i]['filename'] ele me retorna o caminho da img certo também, porém tirando o console ele não faz nada haha Estamos quase, vou ficar tentando, quando achar coloco a resposta aqui.
    – adrib
    6/03/2019 às 17:01
0

Você esta definindo a img com o id (sponsive" id="trocarimg{{$id}}">) e eta tentando recuperar usando a classe trocarimg altera i seu js para isso

for (i = 0; i < string_array.length; i++) { document.getElementById('trocarimg'+i).src = // o src }

ps. Não conheço o framework que vc está usando mas $id de id="trocarimg{{$id}}"> talvez não seja o index do item no array de fotos.

Em @foreach($produtos->produtoFotos as $fotos) talvez seja possível pegar o index do item da interação.

1
  • Correto, ele não pega o index. É bem disso que eu preciso também. Vou estar procurando como pegar o index do array.
    – adrib
    6/03/2019 às 16:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .