Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Javascript multiplication tables

  1. Aug 6, 2014 #1

    adjacent

    User Avatar
    Gold Member

    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 (Text):
    <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: Aug 6, 2014
  2. jcsd
  3. Aug 6, 2014 #2

    jedishrfu

    Staff: Mentor

    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.
     
  4. Aug 6, 2014 #3

    adjacent

    User Avatar
    Gold Member

    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!
     
  5. Aug 6, 2014 #4

    adjacent

    User Avatar
    Gold Member

    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
     

    Attached Files:

  6. Aug 6, 2014 #5

    jedishrfu

    Staff: Mentor

    so your code is generating

    Code (Text):

    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 (Text):

    999 * 999 = 999<br>999 * 999 = 999<br>999 * 999 = 999
     
    Would that work?
     
  7. Aug 6, 2014 #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 (Text):
            .dc {
                height:500px;
                width:300px;
                overflow:scroll;
                border:1px solid black;
            }
    Then, replace the four spaces with "&nsbp;".
    So:
    Code (Text):
                    document.getElementById("gui").innerHTML += Of +"&nbsp;x&nbsp;"+ i+" &nbsp;=&nbsp;"+ans +"<br>";
     
  8. Aug 6, 2014 #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".
     
  9. Aug 7, 2014 #8

    adjacent

    User Avatar
    Gold Member

    It didn't work. :devil:
    Oh, it worked. But how do I set it to the width it had before setting any width property to it?

    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?
     
  10. Aug 7, 2014 #9

    AlephZero

    User Avatar
    Science Advisor
    Homework Helper

    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.
     
  11. Aug 7, 2014 #10

    adjacent

    User Avatar
    Gold Member

    But It's a <p> element here. I made new lines for rows :confused:
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: Javascript multiplication tables
  1. Javascript Help (Replies: 4)

  2. Frontpage JavaScript (Replies: 3)

  3. Javascript problem (Replies: 6)

Loading...