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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with multiplication tables

    I am trying to create a javascript code that performs the following tasks for my childern:

    1)prompts the user to enter a value between 1 and 12 (inclusive)

    2) if the value falls outside of this range eg 13 then an alert box displays a message.

    3)on entry of the correct value (1 to 12) the user should be presented with a multiplication table showing their input value multiplied between 1 and 12 times.

    4)this multiplication table should be displayed in a html table with 13 rows and five columns, the first row should contain a suitable heading which includes the input value in merged fields; the five columns should contain the multiplying value (from 1 to 12), the word "times", the input value, the word "equals" and finally the result.

    5)the table header should have a light gray background with lines of the multiplication table having alternately light blue and light yellow backgrounds.

    Can any body help as I'm new to javascript and getting lost fast.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Maybe this helps:
    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    			function multi() {
    				var par_elem = document.getElementById("table");
    				while(par_elem.childNodes.length) {
    					par_elem.removeChild(par_elem.childNodes[0]);
    				}
    				var input = 0.5;
    				while(input < 1 || input > 12 || parseInt(input) != input) {
    					if(input_str === null) {
    						create_button();
    						return;
    					}
    					var error = (typeof(input_str) != "undefined") ? "Your input is not a value between 1 and 12 or is not an integer. Try again.\n" : "";
    					var input_str = window.prompt(error + "Enter a value between 1 and 12 (inclusive, integer only)", "");
    					var input = new Number(input_str);
    				}
    				var table = document.createElement("table");
    				table.style.border = "1px solid #000000";
    				table.style.borderCollapse = "collapse";
    				var hrow = document.createElement("tr");
    				var heading = document.createElement("td");
    				heading.colSpan = 5;
    				heading.style.backgroundColor = "#C0C0C0";
    				heading.appendChild(document.createTextNode("multiplication table for: " + input));
    				hrow.appendChild(heading);
    				table.appendChild(hrow);
    				for(var i = 1; i < 13; i++) {
    					var color = (i / 2 == Math.floor(i / 2)) ? "#E0E0FF" : "#F0F000";
    					var tr = document.createElement("tr");
    					var value = document.createElement("td");
    					value.style.backgroundColor = color;
    					value.appendChild(document.createTextNode(i));
    					var times = document.createElement("td");
    					times.style.backgroundColor = color;
    					times.appendChild(document.createTextNode("times"));
    					var inp_cell = document.createElement("td");
    					inp_cell.style.backgroundColor = color;
    					inp_cell.appendChild(document.createTextNode(input));
    					var equals = document.createElement("td");
    					equals.style.backgroundColor = color;
    					equals.appendChild(document.createTextNode("equals"));
    					var result = document.createElement("td");
    					result.style.backgroundColor = color;
    					result.appendChild(document.createTextNode(i * input));
    					tr.appendChild(value);
    					tr.appendChild(times);
    					tr.appendChild(inp_cell);
    					tr.appendChild(equals);
    					tr.appendChild(result);
    					table.appendChild(tr);
    				}
    				par_elem.appendChild(table);
    				if(document.all && !window.opera) par_elem.innerHTML = par_elem.innerHTML;
    				create_button();
    			}
    			function create_button() {
    				var ie = (document.all && !window.opera);
    				if(ie) var button = document.createElement("<input type='button' value='new multiplication table'>");
    				else {
    					var button = document.createElement("input");
    					button.type = "button";
    					button.value = "new multiplication table";
    				}
    				button.onclick = multi;
    				document.getElementById("table").appendChild(button);
    			}
    			window.onload = multi;
    		</script>
    	</head>
    	<body>
    		<div id="table"></div>
    	</body>
    </html>
    dumpfi

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice script dumfi but the numerous required specifics makes this seems more like a homework assignment and your use of the DOM is more than likely much to advanced....

    Anyway, this question was also answered here.....

    .....Willy


  •  

    Posting Permissions

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