Pick dynamic variable

Asked

Viewed 110 times

3

I am making a script so that when client click on one of the colors that the product has.

inserir a descrição da imagem aqui

the product next to change the photo. However, as it is a precise photo array that each id contains a different name. Then inside the product loop add the photo the id:

id="trocarimg{{$id}}"

Problem

I can’t get him to take this id with the complement of the variable ex: trocarimg1 - trocarimg2 ... My javascript code is as follows:

inserir a descrição da imagem aqui

here where I call the variable Document.getElementById("trocarimg") would need that in the trocarimg the same code appeared as the variable inside the array. If you need more information, just ask. Thank you.

javascript array
  • 2

    Have you tried document.getElementById("trocarimg"+i)?

  • Hi Sam, I think I’ve even tried. It returns me the following error Uncaught Typeerror: Cannot set Property 'src' of null I know it must be something very small but since I’m not very good of JS (I’m studying) I can’t see the problem.

  • is executed before or after the elements? If it is before, it will actually give that error that you even quoted.

  • Displays the code that creates/defines the element with the class trocarimg

  • Another thing, don’t use a function inside a loop that doesn’t work.

  • For tests I left everything on the same page, for example. I have all html+php above this javascript code. I don’t know if that answers your question. Here’s the full code link

  • Hello Matheus, I’ve created a Pastebin for this. code, thanks for the reply for now.

Show 2 more comments

2 answers

0


You are doing wrong by placing a function inside a loop for. This tie seems to me to be quite unnecessary, including.

Just use the normal function and concatenate the argument i in id of the element:

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

Where the i is a number that should be sent by clicking. For example:

onclick="img(1)"

  • Hi Sam, I tested this way, but I would need the loop to be able to search inside the array for the position of the photo _ Document.getElementById("trocarimg"). src = '/images/'+string_array[i]['filename'];_ for her filename. I also have a problem with her only changing the photo of the first _id("trocarimg").

  • The value of i already finds position in array. No need for loop.

  • Right, I’m almost haha. I managed to get index from the array on id="trocarimg{{$i}}" along with the JS function that you taught me up there, the only problem is still I find in Document.getElementById("trocarimg"+i) , giving a console.log it picks up the right images, but it doesn’t change.

  • Was to change the src element by the value found in the array. For example: <img id="trocarimg1" src="imagemX">... in making document.getElementById("trocarimg"+i).src = "imagemY";, where the value of i would be 1, should change the src of <img>.

  • Correct Sam, on the.log() console he’s doing it well. If I give a console on Document.getElementById("trocarimg"+i) it returns me the entire html of each item for each color, if you give the console in Document.getElementById("trocarimg"+i). src = '/images/'+ string_array[i]['filename'] it returns me the right img path too, but taking off the console it does nothing haha We are almost, I will keep trying, when I find put the answer here.

  • It’s really weird. You should change the image.

  • But show ball, this answer is correct. I will mark it and when it hits here I send the answer as it was for me. Thanks Sam.

Show 2 more comments

0

You are setting the img with the id (sponsive" id="trocarimg{{$id}}">) and is trying to recover using the class trocarimg change your js for this

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

ps. I don’t know the framework you are using but $id of id="trocarimg{{$id}}"> maybe it’s not the index of the item in the photo array.

In @foreach($produtos->produtoFotos as $fotos) maybe it is possible to pick up the index of the interaction item.

  • Right, it doesn’t get the index. That’s pretty much what I need too. I’ll be looking for how to get the index from the array.

Browser other questions tagged javascript array

You are not signed in. Login or sign up in order to post.