如何使用基于使用JavaScript单击的特定按钮的数组中的信息替换div上的信息？

Question

So this is my first question being asked here and i don't know if I'm just overthinking this or overlooking something.....

I'm trying to make a script that will replace the information inside a pop-up on my website with information from an array depending on what item of my catalog that opens the actual pop-up is being clicked using JavaScript.

I want to mention that I'm not well versed in programming. I can handle and understand the logic part of the problem. I know what i want, but I'm stuck trying to code it out.

So I currently have only 1 item in my catalog that I'm using for testing and all I'm trying to do at the moment is change the information inside the p tags:

p id="item-description" target="0"> Lorem ipsum dolor sit amet < p

Now... in my JavaScript file I've stored an array.... "let description = ["description 1", "description 2", "description 3"]

I've also stored the value of the attribute "target" for the item : "let target = document.getElementById('item-description'); target = target.getAttribute("target"); "

(once i can do it for a single one, I'm going to be changing functionality to store the value of the attribute "target" for whichever item is going to be clicked)

This is how I'm trying to approach this ..... once i store the value of "target" i need compare it to every position value in the array until they both match (this is where I'm currently stuck) . Once there is a match found, that match value will be stored and it will determine what content from the array i want to use to replace the description in my pop up..

The biggest problem that I'm facing right now is actually storing the value of the position of the element in the array to compare it to the "target" clicked on or the sample one i currently have as "0".

How can this be approached? or is there a better way I'm overlooking that can help me accomplish my main task?

Answer 1

Not totally sure I understand your question, but I think you're trying to do something like this:

const myArrayOfStuff = ["stuff1", "stuff2", "stuff3"];
const target = document.getElementById("item-description");
const targetAtt = target.getAttribute("target");
target.innerHTML = myArrayOfStuff[targetAtt]

That will replace the text in the div "item-description" with "stuff1" if the target is set to 0.