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

Question

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?

Each time i refresh the page the numbers should iterate one by one I am confused with this line. Can you elaborate? — Rajaprabhu Aravindasamy
– 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
– techfoobar, Commented Jan 20, 2015 at 6:33

Rohan Kumar · Accepted Answer · 2015-01-20 11:11:46Z

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.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

edited Jan 20, 2015 at 11:11

answered Jan 20, 2015 at 6:43

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

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

8 Comments

karthik Over a year ago

thanks rohan can this be applicable for html5 canvas too?? i need to load the numbers inside canvas

Rohan Kumar Over a year ago

Yes you can try and make an online demo if you get any errors.

karthik Over a year ago

jsfiddle.net/karthikchandran/v9pm6f8w ..see this i have tried in this but errors..i need the letters to be loaded in oreder ..here they have used math.random to randomly load the strings into the canvas..how to i orderly do it..can you help me

Rohan Kumar Over a year ago

See my last updated answer and demo jsfiddle.net/rohankumar1524/v9pm6f8w/2

karthik Over a year ago

is there any way tat i could place hint points like 1 2 3 over the alphabet for the kids to know how to draw @rohan

|

Rakesh_Kumar · Accepted Answer · 2015-01-20 06:40:33Z

2

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]);
}

answered Jan 20, 2015 at 6:40

Rakesh_Kumar

1,4621 gold badge17 silver badges30 bronze badges

3 Comments

karthik Over a year ago

i need the strings to be displayed in dom

Rakesh_Kumar Over a year ago

@karthik As and when you click on button, it should display one by one in some div?Or All of string at a time?

Rakesh_Kumar Over a year ago

@karthik i dont think so..Canvas has altogether different used in 2D graphics. Also, If my answer helped, do accept!.. ;)

Chris Martin · Accepted Answer · 2015-01-20 06:38:44Z

1

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

answered Jan 20, 2015 at 6:38

Chris Martin

30.9k12 gold badges83 silver badges142 bronze badges

1 Comment

karthik Over a year ago

this is good but when i click btn all nos are displayed ..i need only the next string to be displayed ..like if it is 1 and if i click the btn i should only display 2

MegaMind · Accepted Answer · 2015-01-20 06:40:23Z

1

You can use the defualt function

ie,

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

array would be a normal javascript array

answered Jan 20, 2015 at 6:40

MegaMind

6716 silver badges31 bronze badges

Comments

AKD · Accepted Answer · 2015-01-20 06:41:24Z

1

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>

answered Jan 20, 2015 at 6:41

AKD

3,9644 gold badges37 silver badges51 bronze badges

Comments

Satinder singh · Accepted Answer · 2015-01-20 06:44:06Z

0

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

answered Jan 20, 2015 at 6:44

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

Comments

Beri · Accepted Answer · 2015-01-20 07:07:06Z

0

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

push to an array and handle it accordingly.

edited Jan 20, 2015 at 7:07

Beri

11.6k4 gold badges38 silver badges59 bronze badges

answered Jan 20, 2015 at 7:02

Gokuldas.Palapatta

728 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

8 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

8 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related