How do I make a JavaScript created list item clickable?

Question

I've been going through all the related questions but none of the solutions have been working for me. I am extremely new to JavaScript and I'm confused as to how to make a list that I created with JavaScript have clickable items. The most recent attempt included attempting to make an alert pop up on click but instead it just pops up the second the page loads. Please help! Here is my current code:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="css/m-buttons.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.links{
margin: auto;
 border: 3px solid #003366;
text-align: left;
max-width: 700px;
}
p{
font-size: 40px;
text-align: center;
}
li{
font-size: 1w;
}
body{
font-family: verdana;
}
</style>
</head>
<body>
<div class = "links">
<ul id="blah"></ul>
<script>
var testArray = ["One","Two","Three","Four","Five","Six","Seven"];
function makeLongArray(array){
for(var i = 0; i < 1000; i++){
array.push(i);
}
}
makeLongArray(testArray);
function makeUL(array) {
    // Create the list element:
    var list = document.createElement("UL");
    list.setAttribute("id", "blah");

    for(var i = 0; i < array.length; i++) {
        // Create the list item:
        var item = document.createElement("LI");

        // Set its contents:
        item.appendChild(document.createTextNode(array[i]));

        // Add it to the list:
        list.appendChild(item);
        list.onclick = alert("Help."); //this is the code causing the issue.
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById("blah").appendChild(makeUL(testArray));
</script>
</div>
</body>
</html>

I'm not quite sure what you are asking for here, would you care to elaborate a little more? — Lewis Browne
– Lewis Browne, Commented Aug 14, 2017 at 14:24
Sorry about that. Basically, I used javascript to create an array and turn the elements of the array into an ul. I would like to make each list item clickable. — CSRenA
– CSRenA, Commented Aug 14, 2017 at 14:26
onclick expects a function to be assigned to it, you're assigning it the returned value of alert("Help.") which I believe is undefined. alert executes immediately. Wrap it in an anonymous function — Sterling Archer
– Sterling Archer, Commented Aug 14, 2017 at 14:29

Phil · Accepted Answer · 2017-08-14 14:32:51Z

2

Your existing code will execute alert('Help.') every time you execute this line of code list.onclick = alert("Help.");

What you need to do is assign a function to onclick. This function then get executed when onclick is executed. As follows:

item.onclick = function() {console.log('hello world');};

Now each list item's onclick event has a function assigned to it that outputs hello world to the console everytime the list item is clicked.

answered Aug 14, 2017 at 14:32

Phil

3,7663 gold badges36 silver badges42 bronze badges

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

Comments

kinggs · Accepted Answer · 2017-08-14 14:29:43Z

1

You need to assign a function to the onclick event:

list.onclick = function(){ alert("Help."); }

answered Aug 14, 2017 at 14:29

kinggs

1,1782 gold badges10 silver badges26 bronze badges

1 Comment

CSRenA Over a year ago

Thank you. This worked! I'll accept your answer in 5 minutes.

Striped · Accepted Answer · 2020-05-15 13:24:22Z

0

Here is my solution:

function toggleDone(event) {
  var ev = event.target;
  ev.classList.toggle("done");
}

ul.addEventListener("click", toggleDone);

edited May 15, 2020 at 13:24

Striped

2,5423 gold badges27 silver badges33 bronze badges

answered May 15, 2020 at 12:26

Yuriy Krivenko

1

Collectives™ on Stack Overflow

How do I make a JavaScript created list item clickable?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related