JavaScript how to Open/close a modal using a randomly populated linked list of hyperlinks

[dpjollygreen]

So I've got this linked list that has hyperlinks that run a function. I'm trying to get a specific item to show a modal for choices associated with the item. Below I've added the pertinent parts of the code that populate the list as well as the function call that should show the modal. I seem to be having trouble referencing the item in question to trigger the btn that'll make the modal work. These items are in separate functions.

Creation______________

const ropeString = /Rope/g;
const matchRope = inventoryString.match(ropeString);
let numRopes = matchRope.length;
// document.getElementById("test2").innerHTML = numRopes;
for(let i = 0; i < numRopes; i++){
let rope = document.createElement('li');
let ropeLink = document.createElement('a');
ropeLink.textContent = "Rope";
ropeLink.href = "#";
ropeLink.id = "rope";
ropeLink.href = "javascript:useRope()";
rope.appendChild(ropeLink);
listInv.appendChild(rope);
}

Use______________

 

[Antero360]

So I've got this linked list that has hyperlinks that run a function. I'm trying to get a specific item to show a modal for choices associated with the item. Below I've added the pertinent parts of the code that populate the list as well as the function call that should show the modal. I seem to be having trouble referencing the item in question to trigger the btn that'll make the modal work. These items are in separate functions.

Creation______________

const ropeString = /Rope/g;
const matchRope = inventoryString.match(ropeString);
let numRopes = matchRope.length;
// document.getElementById("test2").innerHTML = numRopes;
for(let i = 0; i < numRopes; i++){
let rope = document.createElement('li');
let ropeLink = document.createElement('a');
ropeLink.textContent = "Rope";
ropeLink.href = "#";
ropeLink.id = "rope";
ropeLink.href = "javascript:useRope()";
rope.appendChild(ropeLink);
listInv.appendChild(rope);
}

Use______________

Hi there
Is that intentional that you are overriding the use of ropeLink.href?

 

[dpjollygreen]

Use______________

function openRopeModal() {
let ropeModal = document.getElementById("ropeModal");
let btn = document.getElementById("rope"); //reference to id created in linked list
let span = document.getElementsByClassName("close");

// When the user clicks on the button, open the modal
btn.onclick = function() {
ropeModal.style.display = "block"; //When used outside of btn.onclick the modal opens
}

 

[dpjollygreen]

Hi there
Is that intentional that you are overriding the use of ropeLink.href?

Yes that is intended. the resultant function calls the second portion. Having trouble posting that code here.

 

[dpjollygreen]

The code inside the original post is the creation of the hyperlinked item. The code in the reply is the attempted call to that item.