Javascript multiplication tables

Join the discussion
Ask a follow-up here, or get your own question answered by working scientists, mathematicians and engineers — people, not an autocomplete.
Real named experts · corrections over time · the nuance an AI answer skips
9 replies · 4K views
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:
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: 992
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
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: