for loop to create button jquery or javascript

Question

im having trouble creating buttons dynamically by iterating through a loop. i am fairly new at this so im not sure where im going wrong. here's what i have so far. any advice?

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript"></script>
<script src="giphy.js"></script>
</head>
<body>
  <div id="buttonDiv"></div> 
  <div id="gifsAppearHere"></div> 
   </body>
   </html>


 var topics = ['bikram', 'yoga', 'vegan', 'vegetarian','nutrition', 'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana']
 for (var i = 0; i < topics.length; i++) { 
     var buttons = $('<button>'+ topics.text + '</button>') 
     buttons.append('topics'); 
}

you just created button.... now you need to append the element to any dom element... — Pranav C Balan
– Pranav C Balan, Commented Nov 7, 2016 at 18:19
Please specify clearly what you are trying to do and what "going wrong" means exactly. — Emily Shepherd
– Emily Shepherd, Commented Nov 7, 2016 at 18:35

T.J. Crowder · Accepted Answer · 2016-11-07 18:19:59Z

2

Look again at the documentation. You've used append, but you wanted appendTo (easy mistake to make).

append appends the thing you pass as an argument to the thing you call it on.

appendTo appends the thing you call it on to the thing you pass as an argument.

Also note that the selector "topics" looks for an element with the tag name topics, e.g. <topics>...</topics>. You may have meant to use a class selector (".topics"), or an ID selector ("#topics").

You've also used topics.text where I think you meant topics[i] (perhaps an error when simplifying the code for the question).

Example:

var topics = ['bikram', 'yoga', 'vegan', 'vegetarian', 'nutrition',    'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana']
for (var i = 0; i < topics.length; i++) { 
    var buttons = $('<button>'+ topics[i] + '</button>') 
    buttons.appendTo('#topics'); 
}

<div id="topics"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Nov 7, 2016 at 18:19

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

wsrt Over a year ago

HI! I tried to create space between each of the buttons by including &nbsp but it's not happening. How may I create a space between the buttons? What I tried: var buttons = $('<button>'+ topics[i] + '</button>' + '&nbsp').

Mahi · Accepted Answer · 2016-11-07 18:20:25Z

0

using inline code

var pages = ['bikram', 'yoga', 'vegan', 'vegetarian', 'nutrition',    'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana'];
var pageButtons = $('#pageButtons');
for (var i = 0; i < pages.length; i++) {
  pageButtons.append('<input type="button" id="button' + i + '" value="' + pages[i] + '"/>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageButtons">

</div>

answered Nov 7, 2016 at 18:20

Mahi

1,72513 silver badges22 bronze badges

Comments

Tinsten · Accepted Answer · 2016-11-07 18:23:50Z

0

I'm not entirely sure of what you are trying to do but I this is how I would write that code. This will append 11 buttons with names on them to the body.

I hope this helps!

var topics = ['bikram', 'yoga', 'vegan', 'vegetarian', 'nutrition','exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana'];
for (var i = 0; i < topics.length; i++) { 
    var button = $('<button>'+ topics[i] + '</button>') 
    $('.div-with-btns').append(button); /*div that holds your btns*/ 
}

answered Nov 7, 2016 at 18:23

Tinsten

3562 silver badges15 bronze badges

Collectives™ on Stack Overflow

for loop to create button jquery or javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related