How to display Javascript function in an HTML tag?

Question

I am trying to create a counting table for kids. I want to display a button which will display the counting in a list. I can get it to print to the page but i want to print it in paragraph tag in my HTML please have a look and suggest me the solution.

<p id="main"></p>
<button onclick="counting();" >Counting 1 to 10</button>

var counting = function(){
    var myCount = 1;
    while(myCount < 11){
    var countTotal = myCount;
    document.getElementById('main').innerHTML = countTotal;
    //print(countTotal);
    myCount++;
    }
return countTotal;
}

It seems you already putting the result in the paragraph (assuming the JS code is actually in a <script>, not like in your example). What is the problem with your code? The title of your question seems to suggest you want to show the source of the function itself, but that might just be unfortunate wording. — Felix Kling
– Felix Kling, Commented Aug 17, 2015 at 15:11
Change this line to show complete list: document.getElementById('main').innerHTML = countTotal; to document.getElementById('main').innerHTML += countTotal + "<br />" — Frogmouth
– Frogmouth, Commented Aug 17, 2015 at 15:14
With your js code you are only going to see the end count as the while loop is going to continue running (and blocking the UI) till it ends, only after it ends are you going to see the count in the html element updated. If you want to visually see it increment you will need to use a timer (setTimeout/setInterval) — Patrick Evans
– Patrick Evans, Commented Aug 17, 2015 at 15:14

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The @Lal's answer is the answer (I wrote the same in a comment).

But, I suggest another way:

Instead of using the while cycle you can use a setInterval, in my opinion to create a counting table for kids the user experience is more important then performance:

take a look to this code:

var counting = function(){
    var myCount = 1;
    document.getElementById('main').innerHTML += myCount + "<br/>";
    var _timeout = setInterval(function(){
        myCount++;
        document.getElementById('main').innerHTML += myCount + "<br/>";
        if(myCount == 10) clearTimeout(_timeout)
    },1000)
}

This function set a timer that every 1000 milliseconds (1 second) show you a new number so as to allow time for the child to count.

Look this example: https://jsfiddle.net/Frogmouth/bke47w3u/2/

if(myCount == 10) clearTimeout(_timeout) stop the timer when myCount is 10.

Add Cell to a table:

If you need to add the number like cell of table simply change the html container #main:

<table id="main"></table>

and the html printed by .innerHTML:

document.getElementById('main').innerHTML += "<tr><td>" + myCount + "</td></tr>";

This show you a table with 1 cell for each rows for a total of 10 rows.

Example: https://jsfiddle.net/Frogmouth/bke47w3u/5/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 17, 2015 at 15:34

Frogmouth

1,8161 gold badge14 silver badges22 bronze badges

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

2 Comments

Alrick Over a year ago

The _timeout is definitely make sense. The other thing i got to know is that we can use += with getElementById function. But i would like to know is there a way we can append it into the table to make it look good?

Frogmouth Over a year ago

In a table? Yes you can, I edit my answer, take a look.

Lal · Accepted Answer · 2015-08-17 15:17:31Z

0

See this fiddle

You have to append the innerHTML each time you are performing the count. So you have to set the innerHTML as below

document.getElementById('main').innerHTML += countTotal + "<br />";

answered Aug 17, 2015 at 15:17

Lal

14.9k4 gold badges50 silver badges76 bronze badges

Collectives™ on Stack Overflow

How to display Javascript function in an HTML tag?

2 Answers 2

But, I suggest another way:

Add Cell to a table:

2 Comments

See this fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

But, I suggest another way:

Add Cell to a table:

2 Comments

See this fiddle

Comments

Your Answer

Sign up or log in

Post as a guest

Related