Javascript multiplication tables

Click For Summary

Discussion Overview

The discussion revolves around a JavaScript program for generating multiplication tables. Participants explore performance issues compared to C#, code optimization techniques, and layout considerations using HTML elements.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Conceptual clarification

Main Points Raised

  • One participant notes that their JavaScript multiplication table program is significantly slower than the equivalent C# code.
  • Another suggests using a temporary variable to concatenate results before assigning to innerHTML to improve performance, as frequent updates to innerHTML can slow down rendering.
  • A later reply confirms that this optimization resolved their performance issue, allowing for faster table generation.
  • Participants discuss how to manage line breaks in the output, with suggestions to conditionally add
    tags and to adjust CSS properties for better layout control.
  • There are conflicting views on using tables for layout versus using
    elements, with some arguing that tables are appropriate for displaying tabular data, while others caution against using them for layout purposes.
  • One participant expresses confusion about using

    elements for rows in a multiplication table, indicating a misunderstanding of HTML semantics.

Areas of Agreement / Disagreement

Participants generally agree on the performance improvement technique involving temporary variables, but there are multiple competing views regarding the appropriate use of tables versus

elements for layout, and the discussion about line breaks remains unresolved.

Contextual Notes

Some participants express uncertainty about the best practices for HTML structure and layout, and there are unresolved questions about performance implications when using tables for layout.

adjacent
Gold Member
Messages
1,552
Reaction score
62
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
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   Reactions: 1 person
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!
 
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: 974
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?
 
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>";
 
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".
 
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?
 
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   Reactions: 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:
 

Similar threads

  • · Replies 13 ·
Replies
13
Views
2K
  • · Replies 12 ·
Replies
12
Views
4K
  • · Replies 3 ·
Replies
3
Views
2K
  • · Replies 3 ·
Replies
3
Views
2K
  • · Replies 7 ·
Replies
7
Views
7K
  • · Replies 4 ·
Replies
4
Views
2K
  • · Replies 9 ·
Replies
9
Views
4K
  • · Replies 21 ·
Replies
21
Views
6K
  • · Replies 8 ·
Replies
8
Views
6K
  • · Replies 6 ·
Replies
6
Views
3K