CODEWITHSUNDEEP
javascriptjqueryhtml
tganyan
tganyan

Reputation: 633

Create html element with jquery based on user input

So after searching a while I haven't been able to find an existing question that seems to address this in a way that I can relate to with my specific issue. If there is already a good thread on this that I missed, my apologies in advance and feel free to just post a link to it and call me a dummy!

In plain english, here's the goal: I basically want to generate some html with jquery but with a couple of twists. There will basically be two sets of content that will alternate with every other number, I'll call them content-a and content-b. The user is prompted to enter a number, let's say user enters 4. Upon submitting this value, the markup is then generated like so: (1)content-a (2)content-b (3)content-a (4)content-b.

So here's a bit of code that hopefully will help a little.

I'm aware of how to generate html, but that's about as far as I've gotten so far, my js is definitely a weak point and needs lots of practice:

$("#targetDIV").html("<h1>Hello World!</h1> <p>This is a big fat test</p>");

The markup is simple enough, almost seems pointless to post it in here since it's kind of obvious but I'll do it anyway:

<div id="targetDIV" style="border: 3px solid purple">
</div>

The desired output though would be something like this, based on the value the user chooses but let's just stick with the 4 example: 

<div id="targetDIV" style="border: 3px solid purple">
  <!-- Content A -->
  <h1>Hello World!</h1> 
  <p>This is a big fat test</p>

  <!-- Content B -->
  <h1>Hello Universe!</h1> 
  <p>This is a super mega big fat test</p>

  <!-- Content A -->
  <h1>Hello World!</h1> 
  <p>This is a big fat test</p>

  <!-- Content B -->
  <h1>Hello Universe!</h1> 
  <p>This is a super mega big fat test</p>
</div>

Hopefully there's enough here to go on or to at least point me in the right direction, thanks in advance for any wisdom any of you might offer up!

Upvotes: 2

Views: 1279

Answers (7)

Leo
Leo

Reputation: 459

function generateElments() {
  var num = $("#numOfElements").val();
  var writeA = true;
  var aElement = "<p>I am <strong>A</strong>!</p>";
  var bElement = "<p>I am <strong>B</strong>!</p>";
  for (var i = 0; i < num; i++) {
    $("#elements-container").append(writeA ? aElement : bElement);
    writeA = !writeA;
  };
};

Here is a working plunker of what you need!

http://plnkr.co/edit/qI1LtBwDwu7KIKFzUehB?p=preview

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

$(function() {
    var A = '<!-- Content A --><h1>Hello World!</h1><p>This is a big fat test</p>';

    var B = '<!-- Content B --><h1>Hello Universe!</h1><p>This is a super mega big fat test</p>';
  
    var targetDiv = $('#targetDIV');

    $('#listCount').on('input', function() {
        targetDiv.empty();
        for(var i = 0; i < +this.value; i++) {
            targetDiv.append( i % 2 == 0 ? A : B );
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="listCount" id="listCount"/>
<div id="targetDIV" style="border: 3px solid purple">
</div>

Upvotes: 0

Hasta Tamang
Hasta Tamang

Reputation: 2263

I am not an expert js dev but cooked something quick and easy for you.

link to codepen:http://codepen.io/anon/pen/OVdMow

Upvotes: 0

Terry
Terry

Reputation: 66133

If you are simply alternating between two content sets, you can simply store them as a JS array, say content, and generate/insert them on the fly.

The key is to empty your target element when the user updates the change count, and access the correct element in the array based on the modulus of the array size, i.e. content[i%content.length]. This method allows you to arbitarily increase the size of your content array, and the script will keep inserting elements by going through the list, and repeat from the start when it reaches the end.

$(function() {
  var content = [
    '<h1>Hello World!</h1> <p>This is a big fat test</p>',
    '<h1>Hello Universe!</h1><p>This is a super mega big fat test</p>'
  ];

  $('#count').on('change', function() {
    $('#targetDIV').empty();
    var count = parseInt($(this).val());
    for (var i = 0; i < count; i++) {
      $('#targetDIV').append(content[i%content.length]);
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="count" type="number" min="0" step="1" value="0" placeholder="0" />
<div id="targetDIV" style="border: 3px solid purple"></div>

Upvotes: 0

JBux
JBux

Reputation: 1394

You could do something like this.

$('#number').change(function() {
    var ind = $(this).val()
    $('#target-div').append($('#holder div').get(ind))
});

This keeps the HTML in a hidden div, then extracts your desired content by its index. Not the best way but works.

JSFiddle

Upvotes: 0

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Here is a full, working live example that does exactly what you're looking for.

The following code will take a numerical input from the user, then append alternating sets of content according to the number the user inputted:

var num = prompt("Enter a number");
var contenta = "<h1>Hello World!</h1> <p>This is a big fat test</p>";
var contentb = "<h1>Hello Universe!</h1> <p>This is a super mega big fat test</p>";
var targetDiv = $("#targetDIV");

console.log(targetDiv);

for (var i = 0; i < num; i++) {
    if (i % 2 === 0) targetDiv.append(contenta);
    else targetDiv.append(contentb);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="targetDIV" style="border: 3px solid purple">
</div>

Upvotes: 2

LexJacobs
LexJacobs

Reputation: 2533

You could assign the two html strings to the indices of an array.

var str1 = "<h1>Hello World!</h1> <p>This is a big fat test</p>"
var str2 = "<h1>Hello Universe!</h1> <p>This is a super mega big fat test</p>"

var responses = [str1, str2];

Then, you can use a for loop that will repeat as many times as the user's input. And in each iteration of the loop, you could perhaps $('#targetDIV').append(responses[i % 2]);

Upvotes: 0

Related Questions