Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Multiplication table

    I am trying to allow the user to type in two numbers and then a multiplication table pops up below it. It works however I cannot figure out how to make the first row be 0,1,2,3,4,5..ect and same for the first column in each row going down the table. Here is my code..


    Code:
    <html>
    <head>
    <title>Untitled</title>
    
    <script>
    function f(x,y)
    {
    
    if((x < 3) || (y < 3) || (x > 10) || (y > 10)){
    			alert("Please enter numbers between 3 and 7")
    }else{ 
     
    s = "<table border = '1'>"
    var total;
    
    for (i=0; i<=x; i++){
    s+= "<tr></tr>";
    
    		for (j=0; j <= y; j++){
    					
    				total = i * j;			 
    				s+="<td>"+ total +"</td>"
                    }
    							}
                    s+="</table>"
                    document.getElementById("Q").innerHTML+=s
                  
    
     }
    }
    </script>
    
    </head>
    <body>
    
    [enter a number between 3 and 10]
    <form id = "form1">
    
    <input id = "a" value = "6"> by <input id = "b" value = "8"><br>
    <input type = "button" onclick = "f(a.value,b.value)" value = "Click here when ready!">
    <br>
    </form>
    
    <div id = "Q"></div>
    
    
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try ...

    I'm not sure I understand, but this is my guess as to what you are trying to accomplish:
    Found some typo errors...
    Code:
    <html>
    <head>
    <title> Dynamic Multiplication Table </title>
    <script type="text/javascript">
    function f(x,y) {
      if((x < 3) || (y < 3) || (x > 10) || (y > 10)) {
        alert("Please enter numbers between 3 and 10 (inclusive)");
      } else { 
        s = "<table border = '1'>";
        var total;
        for (i=1; i<=x; i++) {
          s+= "<tr></tr>";
          for (j=1; j <= y; j++) {
    	total = i * j;			 
    	s+="<td align='right'>"+ total +"</td>";
          }
        }
        s+="</table>";
        document.getElementById("Q").innerHTML = s;
      }
    }
    </script>
    </head>
    <body>
    
    [enter a number between 3 and 10 inclusive]
    <form id = "form1" onsubmt="return false">
    <input id = "a" value = "6"> by <input id = "b" value = "8"><br>
    <input type = "button" onclick = "f(a.value,b.value)" value = "Click here when ready!">
    <br>
    </form>
    <div id = "Q"></div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is not quiet what i am stuck with. If you run the code you see a row and column of all 0's. I want them to be 0-10 both vertical and horizontal if the user types in 10 in each input box

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
     
    <script type="text/javascript"> 
    function f(x,y){
      if((x < 3) || (y < 3) || (x > 10) || (y > 10)){
    	alert("Please enter numbers between 3 and 7")
      }else{  
            var s = "<table border = '1'>\n"
            var total;
            for (var i=0; i<=x; i++){
              s+= "<tr>";
    	  for (var j=0; j <= y; j++){					
    	    if(!(total = i * j))total = i;
    //if the product of i * j is zero use the value of i instead
    	    if(!total)total=j;		
    //if the value of i is zero use the value of j instead	
    //if both i and j are both zero use zero (upper left corner)
    	    s+="<td>"+ total + "</td>";
              }
    	s+="</tr>\n";
           } 
        s+="</table>"
        document.getElementById("Q").innerHTML=s
      }
    }
    </script>
    </head>
    <body>
    <p>[enter a number between 3 and 10]</p>
    <form id = "form1" action="" onsubmit="return false;"><p>
    <input id = "a" value = "6"> by <input id = "b" value = "8"><br>
    <input type = "button" onclick = "f(a.value,b.value)" value = "Click here when ready!">
    </p>
    </form>
    <div id = "Q"></div></body></html>
    This will not work with negative numbers!
    Last edited by DaveyErwin; 09-14-2011 at 05:11 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •