How do you dynamically add items to an array with jQuery click event?

Question

What I am trying to do is dynamically add the URL of each image to an array whenever the user clicks a picture. I tried using the array method push() to add an image URL to an empty array but all it does is replace whatever image URL is already there with the new one you click.

$("img").on("click", function () {
      event.preventDefault()
      console.log(this);
      const gif = $(this).attr("src");
      let savedGif = []
      savedGif.push(gif)
      console.log(savedGif)
    })

How do you want to handle duplicate URLs?

Shiny
– Shiny

2020-01-13 16:51:11 +00:00
Commented Jan 13, 2020 at 16:51 — Shiny
– Shiny, Commented Jan 13, 2020 at 16:51

symlink · Accepted Answer · 2020-01-13 17:01:38Z

3

You're emptying savedGif every time you click. Initialize it outside the onclick event:

let savedGif = []

$("img").on("click", function() {
    event.preventDefault()
    const gif = $(this).attr("src");
    if(!savedGif.includes(gif)){
        savedGif.push(gif)
    }
    console.clear()
    console.log(savedGif)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://placekitten.com/200/100" />
<img src="https://placekitten.com/200/120" />
<img src="https://placekitten.com/200/140" />
<img src="https://placekitten.com/200/160" />

edited Jan 13, 2020 at 17:01

answered Jan 13, 2020 at 16:53

symlink

12.2k7 gold badges31 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do you dynamically add items to an array with jQuery click event?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related