How can I get the src and ID of an image in an array-CodePudding

I made a card as a "dynamic component"... My site can search any artist or song that is on Spotify. Each artist that you search appears in his own card.

I wrote the card, picture and title component in JS. Here is the way I did it:

for(let index = 0; index < artistIdResult.items.length; index  )
{
    var artistImage = document.createElement("input");
    artistImage.className = "artistImage";
    artistImage.type = "image";
    artistImage.src = artistIdResult.items[index].images[0].url;
    artistImage.id = artistIdResult.items[index].id;
    artistImage.width = 100;
    artistImage.height = 100;

    var artistText = document.createElement("h6");
    artistText.className = "artistText";
    var text = document.createTextNode(artistIdResult.items[index].name);
}

(The for just render the number of artist/songs).

When I saw the HTML on the inspector, appears the src, ID and more info from the image:

<input  type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="7m1DQbleCSsoBv1awh5qmu" width="80" height="80">

How can I get in an array the src and ID of each card where I pressed? I mean... I ask for the data in the JS, the HTML show the src and ID, but how can I get it in a variable and after in array?

CodePudding user response：

First we open a new array. You can then use jQuery click function to retrieve the values of attributes when clicked on it $(this). And push them to the array. You can check the array by clicking the test button.