Jquery input paragraph generator

Question

I wanted to build something that could take a users input such as a paragraph number for example 5 then when they click a button it generates that number of paragraphs?

I'm guessing i can store a paragraph in a variable which is no problem but not sure how i could multiple it from the users input :)

If I get some help to start with and explanation how to do it i would appreciate it!

var $paragraph = $(
 '<p> Tired of lorum Ipsum? why not try puff-puffing ipsum? A simple and fun 
  generator to help all those colour puffs that are in need. Put some puff into 
  your project.</p>'
});

Michael Coker · Accepted Answer · 2017-05-21 01:41:19Z

1

Grab the user's value and use a for loop to generate the output, then put it on the page.

$("form").on("submit", function(e) {
  e.preventDefault();
  var num = $('#num').val(),
    paragraph =
      "<p>Tired of lorum Ipsum? why not try puff-puffing ipsum? A simple and fun generator to help all those colour puffs that are in need. Put some puff into your project.</p>",
      output = '';
  for (var i = 0; i < num; i++) {
    output += paragraph;
  }
  $('#output').html(output);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" id="num">
<input type="submit" value="generate">
</form>

<div id="output"></div>

answered May 21, 2017 at 1:41

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

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

Comments

Oleg Markoff · Accepted Answer · 2017-05-21 01:42:43Z

0

You will eed the following: 1. text input box with id ( id will be used to take input (hint val()) 2. output div with id - id will be used tp output your text 3. button to submit clixk event with id (id used to capture click event 3. for loop where maximum loop will be less than your number

inside for loop you just need to append text ( you variable to output div.

I am not writing code, since I guess you want to try it yourself

answered May 21, 2017 at 1:42

Oleg Markoff

3212 silver badges7 bronze badges

Collectives™ on Stack Overflow

Jquery input paragraph generator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related