CODEWITHSUNDEEP
javascriptjqueryhtml
karthik
karthik

Reputation: 63

How to split a comma seperated string and insert into html using javascript

Here is the string:

var numbers = "1,2,3,4,5,6,7,8,9,10";

I want this string to be separated and inserted into html.

Each time I refresh the page the numbers should iterate one by one.

Edit: Sorry, ignore the above line. If I have a button clicked it should iterate through the strings and display one by one.

Can anyone help me do this?

Upvotes: 1

Views: 4414

Answers (7)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

var numbers = "1,2,3,4,5,6,7,8,9,10";
var n=numbers.split(','),
    i=0;
$('#button').on('click', function(){
   $('#show').text(n[i++]);
   if(i==n.length) i=0;
});

HTML

<div id="show"></div>
<button id="button">Increment me</button>


   var numbers = "1,2,3,4,5,6,7,8,9,10";
   var n = numbers.split(','),
     i = 0;
   $('#button').on('click', function() {
     $('#show').text(n[i++]);
     if(i==n.length) i=0;
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<button id="button">Increment me</button>

If you want it on canvas then try it like,

Jquery

var numbers = "1,2,3,4,5,6,7,8,9,10";
var n=numbers.split(','),
    i=0;
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

ctx.font="18px Arial";
$('#button').on('click', function(){
    ctx.clearRect(0,0,300,300);
    ctx.fillText(n[i++],20,20);    
});

HTML

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button id="button">Increment me</button>

Hope, this helps,

var indexLetter=0;
function paintletter(retryletter) {
    var chars = charscontainer.innerHTML.split('');

     // comment the blow code
     /*letter = retryletter ||
             chars[parseInt(Math.random() * chars.length,10)]; */
     // add the below code
      letter = retryletter ||
             chars[indexLetter++];
      if(indexLetter==chars.length) indexLetter=0;
      c.width = container.offsetWidth;
      ......

Demo

Upvotes: 2

Gokuldas.Palapatta
Gokuldas.Palapatta

Reputation: 72

var numbers = "1,2,3,4,5,6,7,8,9,10";
var dataArray = numbers.split(",");

push to an array and handle it accordingly.

Upvotes: 0

Satinder singh
Satinder singh

Reputation: 10198

use .split(',') this returns array of data which split by ,

var numbers = "1,2,3,4,5,6,7,8,9,10";

$("button").on('click', function () {
    var spltValue = String(numbers).split(",");
    for (var i = 0; i < spltValue.length; i++) {
        var aData = spltValue[i];
        console.log(aData);
    }
});

JsFiddle

Upvotes: 0

AKD
AKD

Reputation: 3966

var numbers = "1,2,3,4,5,6,7,8,9,10";
$(numbers.split(',')).each(function(){
    $('#main').append('<div>' + this + '</div><br />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main"></div>

Upvotes: 1

Rakesh_Kumar
Rakesh_Kumar

Reputation: 1442

Refer this fiddle:

http://jsfiddle.net/e1ky6rtj/

On Click of button:

<button onclick='clicked()'>ClickMe</button>

function clicked(){
var numbers = "1,2,3,4,5,6,7,8,9,10";
var c= numbers.split(','); //Split a string into an array of strings
for(var i=0;i<c.length;i++)
    alert(c[i]);
}

Upvotes: 2

MegaMind
MegaMind

Reputation: 671

You can use the defualt function

ie,

var array = numbers.split(",");

array would be a normal javascript array

Upvotes: 1

Chris Martin
Chris Martin

Reputation: 30736

html:

<div id="x"></div>
<button id="y">---</button>

js:

var numbers = "1,2,3,4,5,6,7,8,9,10";

$('#y').click(function () {
    numbers.split(",").forEach(function(n, i) {
        console.log(n + ' ' + i);
        setTimeout(function() {
            $('<p>').text(n).appendTo('#x');
        }, i * 200);
    });
});

fiddle

Upvotes: 1

Related Questions