Creating a div for each item in an array that appears when a button is clicked

Question

I have an array of items that I would like to make appear individually as divs when a link is pressed, each appearing to the right of the last one that appeared. I currently have been able to make the entire list of items in the array appear when the link is clicked however they go below each other and I would like for it to be one item at a time. I am very new to HTML and javascript so thank you in advance to anyone that can help me figure out how to do this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tangential headache</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<a href="#" class="info" data-info="info1" allign= "right">+</a>
<script src="script.js"></script>
</body>
</html>

var tabs = [
  "natal chart - Anthony Weiner",
  "Das Kapital pdf",
  "Applying ancient divination to modern intuition",
  "QAnon - Wikipedia",
  "ADD and ADHD - webMD",
  "apply for a ted talk - google search"
],
arrayLength = tabs.length;

for (i = 0; i < tabs.length; i++){
  $(".info").click(function() {
    var newElement = document.createElement('div');
    newElement.id = tabs[i]; newElement.className = "tabs";
    newElement.innerHTML = tabs[i];
    document.body.appendChild(newElement);





});
}

is entire list of items with UL / LI html tag ? please show HTML code part for this? Is there a parent div ? — Mister Jojo
– Mister Jojo, Commented Dec 5, 2019 at 3:06
hello sorry this is my first time on this forum i have updated the post with my html and javascript code. It is not very functional right now however — noo_meatia
– noo_meatia, Commented Dec 5, 2019 at 3:15

Wils · Accepted Answer · 2019-12-05 03:49:49Z

2

var tabs = [
  "natal chart - Anthony Weiner",
  "Das Kapital pdf",
  "Applying ancient divination to modern intuition",
  "QAnon - Wikipedia",
  "ADD and ADHD - webMD",
  "apply for a ted talk - google search"
],
arrayLength = tabs.length;

  $(".info").click(function() {
    
    var index = $('.tabs').length;
    if (index >= tabs.length) return
    var newElement = document.createElement('div');
    newElement.id = tabs[index]; newElement.className = "tabs";
    newElement.innerHTML = tabs[index];
    document.body.appendChild(newElement);


});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tangential headache</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<a href="#" class="info" data-info="info1" allign= "right">+</a>
<script src="script.js"></script>
</body>
</html>

You should wrap the for loop inside of the click event.

edited Dec 5, 2019 at 3:49

answered Dec 5, 2019 at 3:40

Wils

1,2319 silver badges27 bronze badges

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

3 Comments

noo_meatia Over a year ago

wow thank you very much. Would you by any chance know how to make only a single string appear when the button is clicked?

Wils Over a year ago

what do you mean by single string? which?

noo_meatia Over a year ago

It solves a problem I wasn't asking about but thank you anyway. What I mean is I would like for each string in the array to appear on its own when the link is pressed and every time it is pressed the next one in the array appears alongside the last one. Thanks again.

noo_meatia · Accepted Answer · 2019-12-05 03:58:11Z

var tabs = [
  "natal chart - Anthony Weiner",
  "Das Kapital pdf",
  "Applying ancient divination to modern intuition",
  "QAnon - Wikipedia",
  "ADD and ADHD - webMD",
  "apply for a ted talk - google search"
],
arrayLength = tabs.length;

  $(".info").click(function() {
    
    var index = $('.tabs').length;
    if (index >= tabs.length) return
    var newElement = document.createElement('div');
    newElement.id = tabs[index]; newElement.className = "tabs";
    newElement.innerHTML = tabs[index];
    document.body.appendChild(newElement);


});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tangential headache</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<a href="#" class="info" data-info="info1" allign= "right">+</a>
<script src="script.js"></script>
</body>
</html>

Collectives™ on Stack Overflow

Creating a div for each item in an array that appears when a button is clicked

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related