Javascript multiplication tables

In summary, the conversation discusses a program for generating a multiplication table in Javascript and its slower speed compared to C#. The issue is solved by using a temporary variable and setting the overflow to scroll. The conversation also addresses problems with adding new lines and using tables for layout in HTML. Alternative methods such as using <div> tags are suggested for more complex layouts.
  • #1
adjacent
Gold Member
1,552
63
I am learning Javascript and have made a multiplication table generating program.

But it's about 1000x slower than C#. Is there any problem with this code?
I used the same code as C#, just the syntax is different.
Here is the code:
Code:
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Gui</title>
    <style>
        p{
            padding-left:15px;

        }
        .dc {
            height:500px;
            overflow:scroll;
            border:1px solid black;
        }
        td >table{border:1px solid #DFE0E4; border-radius:5px;}
    </style>
    <script>
        var mf = function(){
            document.getElementById("gui").innerHTML="";
            var Of= document.getElementById("of").value;
            var From= document.getElementById("from").value;
            var To= document.getElementById("to").value;
            for(var i=From;i<=To;i++)
            {
                var ans = Of*i;
                document.getElementById("gui").innerHTML += Of +" x "+ i+" = "+ans +"<br>";
            }

        }
    </script>
</head>
<body style="background-color: #E9EAED;">
<table style="width:100%; height:100%;">
    <tr>
        <td valign="middle">
            <table align="center" style="width:100px;padding:5px;  background-color: #fff;">
                <tr><td>Of:</td><td><input type="number" id="of"></td></tr>
                <tr><td>From:</td><td><input type="number" id="from"></td></tr>
                <tr><td>To:</td><td><input type="number" id="to"></td></tr>
                <tr><td><button type="submit" onclick="mf()">Calculate</button></td></tr>
                <tr>
                    <td colspan="2">
                        <div class="dc"><p id="gui"></p> </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
 
Last edited:
Technology news on Phys.org
  • #2
Maybe you could use a temporary variable instead of using innerHtml and then once everything concatted to it assign it to innerHtml.

Every time, you change innerHtml other threads of the browser will try to update the document display because the innerHtml was changed.
 
  • Like
Likes 1 person
  • #3
jedishrfu said:
Maybe you could use a temporary variable instead of using innerHtml and then once everything concatted to it assign it to innerHtml.

Every time, you change innerHtml other threads of the browser will try to update the document display because the innerHtml was changed.

Oh, that solved the problem. I can even get the table up to 1million in about 15 secs. :smile:
Faster than C# with list.

Thank you so much!
 
  • #4
Another question. How will I prevent this? I want a newline only after the <br> tag. I have already set overflow to scroll. But it's not working. I tried overflow-x too.

attachment.php?attachmentid=71954&stc=1&d=1407352462.png
 

Attachments

  • Capture.PNG
    Capture.PNG
    1.9 KB · Views: 898
  • #5
so your code is generating

Code:
999 * 999 = 999<br>999 * 999 = 999<br>...999 * 999 = 999<br>

try adding the <br> to the line before you add the expression to the line and only if the line isn't the empty string to produce:

Code:
999 * 999 = 999<br>999 * 999 = 999<br>999 * 999 = 999

Would that work?
 
  • #6
There are two thinks you can do.
First, limit the width so that if you overrun it would just make it wider.
So:
Code:
        .dc {
            height:500px;
            width:300px;
            overflow:scroll;
            border:1px solid black;
        }
Then, replace the four spaces with "&nsbp;".
So:
Code:
                document.getElementById("gui").innerHTML += Of +"&nbsp;x&nbsp;"+ i+" &nbsp;=&nbsp;"+ans +"<br>";
 
  • #7
Actually, forget about those "&nbsp;"s. Instead include "white-space: nowrap;" in your style.

Also, I am guessing that the start of your last style rule "td >table" is supposed to be "td, table".
 
  • #8
jedishrfu said:
try adding the <br> to the line before you add the expression to the line and only if the line isn't the empty string to produce:
Would that work?
It didn't work. :devil:
.Scott said:
There are two thinks you can do.
First, limit the width so that if you overrun it would just make it wider.
So:
Code:
        .dc {
            height:500px;
            width:300px;
            overflow:scroll;
            border:1px solid black;
        }
Include "white-space: nowrap;" in your style.
Oh, it worked. But how do I set it to the width it had before setting any width property to it?

.Scott said:
Also, I am guessing that the start of your last style rule "td >table" is supposed to be "td, table".
I have two tables , one for layout and other for the actual thing. the actual thing is inside <td> of the first table :wink:

Actually w3schools does not recommend using tables for layout. However, I don't find any other easy way to do it without using tables. Is there any performance issue with using tables?
 
  • #9
adjacent said:
Actually w3schools does not recommend using tables for layout. However, I don't find any other easy way to do it without using tables. Is there any performance issue with using tables?

The content of a multiplication table is (doh!) a table, and that's what HTML tables were intended for.

If you want to use tables to create something more complicated than a rectangular grid of cells, the code can quickly get very messy.

A better way to create more general layouts is to use the <div> tags to define "tiles" that fit together to make the complete page.
 
  • Like
Likes 1 person
  • #10
AlephZero said:
The content of a multiplication table is (doh!) a table, and that's what HTML tables were intended for.

But It's a <p> element here. I made new lines for rows :confused:
 

Related to Javascript multiplication tables

1. How do I create a multiplication table in Javascript?

To create a multiplication table in Javascript, you can use a nested for loop. The outer loop will iterate through the rows, while the inner loop will iterate through the columns. Inside the inner loop, you can use the multiplication operator (*) to calculate the product of the row and column numbers.

2. Can I customize the size and range of my multiplication table?

Yes, you can customize the size and range of your multiplication table by adjusting the parameters in your for loops. For example, if you want a 10x10 table, you can set the loop limits to 1 to 10. If you want the table to display the products from 1 to 20, you can set the range of the inner loop to 1 to 20.

3. How do I display the multiplication table on a webpage?

To display the multiplication table on a webpage, you can use the document.write() method to output the table to the browser. You can also use the innerHTML property of a DOM element to insert the table into a specific location on the webpage.

4. Can I add styling to my multiplication table?

Yes, you can add styling to your multiplication table by using CSS. You can target the table element and its child elements to change the font, color, borders, and other visual aspects of the table.

5. How can I make my multiplication table interactive?

To make your multiplication table interactive, you can add event listeners to the table cells. These event listeners can trigger a function that allows the user to input a number and see the corresponding row or column highlighted in the table. You can also add buttons or links that allow the user to change the range or size of the table dynamically.

Similar threads

  • Programming and Computer Science
Replies
13
Views
1K
  • Programming and Computer Science
Replies
12
Views
3K
  • Programming and Computer Science
Replies
10
Views
418
  • MATLAB, Maple, Mathematica, LaTeX
Replies
3
Views
422
  • Programming and Computer Science
Replies
4
Views
1K
  • Programming and Computer Science
2
Replies
45
Views
4K
  • Programming and Computer Science
Replies
7
Views
6K
  • Programming and Computer Science
Replies
2
Views
5K
  • Set Theory, Logic, Probability, Statistics
Replies
1
Views
2K
  • Programming and Computer Science
Replies
21
Views
5K
Back
Top