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?

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?

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 20, 2015 at 6:40 Chris Martin 30.8k1212 gold badges8080 silver badges140140 bronze badges asked Jan 20, 2015 at 6:31 karthikkarthik 6311 gold badge33 silver badges1111 bronze badges 8

• Each time i refresh the page the numbers should iterate one by one I am confused with this line. Can you elaborate? – Rajaprabhu Aravindasamy Commented Jan 20, 2015 at 6:32
• Its hard to understand the objective here! Add an example of how exactly (markup) you want the above to be inserted into your page. – techfoobar Commented Jan 20, 2015 at 6:33
• on what you need to separate string ? – Sangram Chavan Commented Jan 20, 2015 at 6:33
• use cookie or local storage instead... – Bhojendra Rauniyar Commented Jan 20, 2015 at 6:33
• 1 jsfiddle/arunpjohny/jnktehpq/1 – Arun P Johny Commented Jan 20, 2015 at 6:38

 |  Show 3 more ments

7 Answers 7

Sorted by: Reset to default 2

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./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('');

     // ment 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

Refer this fiddle:

http://jsfiddle/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]);
}

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

You can use the defualt function

ie,

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

array would be a normal javascript array

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./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main"></div>

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

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

push to an array and handle it accordingly.