Solved

JavaScript calculator

Posted on 2014-04-28
3
203 Views
Last Modified: 2014-04-28
Hi guys, I'm stuck with one of my web assignments. I was asked to do a website for kids with mathematical functions like adding, subtracting, multiplying etc and I am stuck with times tables. I have JS in an external file, and I know that there is a way of doing this with a for loop, but I just simply don't get it, and I'm ending up with lines and lines of code for each number.

JavaScript

var TimesTables = function()
{
	var a = parseInt( $("a").value );
	var b = parseInt( $("b").value );

	if (isNaN (a) || isNaN (b) )
	{
		alert("Sorry you have to enter an integer value between 1 and 20:");
	}
	else 
	{
		$("a1").value = a + " x 1 = " + (a * 1);
		$("a2").value = a + " x 2 = " + (a * 2);
		$("a3").value = a + " x 3 = " + (a * 3);
		$("a4").value = a + " x 4 = " + (a * 4);
		$("a5").value = a + " x 5 = " + (a * 5);
		$("a6").value = a + " x 6 = " + (a * 6);
		$("a7").value = a + " x 7 = " + (a * 7);
		$("a8").value = a + " x 8 = " + (a * 8);
		$("a9").value = a + " x 9 = " + (a * 9);
		$("a10").value = a + " x 10 = " + (a * 10);
		$("a11").value = a + " x 11 = " + (a * 11);
		$("a12").value = a + " x 12 = " + (a * 12);
		$("a13").value = a + " x 13 = " + (a * 13);
		$("a14").value = a + " x 14 = " + (a * 14);
		$("a15").value = a + " x 15 = " + (a * 15);
		$("a16").value = a + " x 16 = " + (a * 16);
		$("a17").value = a + " x 17 = " + (a * 17);
		$("a18").value = a + " x 18 = " + (a * 18);
		$("a19").value = a + " x 19 = " + (a * 19);
		$("a20").value = a + " x 20 = " + (a * 20);
			
		$("b1").value = b + " x 1 = " + (b * 1);
		$("b2").value = b + " x 2 = " + (b * 2);
		$("b3").value = b + " x 3 = " + (b * 3);
		$("b4").value = b + " x 4 = " + (b * 4);
		$("b5").value = b + " x 5 = " + (b * 5);
		$("b6").value = b + " x 6 = " + (b * 6);
		$("b7").value = b + " x 7 = " + (b * 7);
		$("b8").value = b + " x 8 = " + (b * 8);
		$("b9").value = b + " x 9 = " + (b * 9);
		$("b10").value = b + " x 10 = " + (b * 10);
		$("b11").value = b + " x 11 = " + (b * 11);
		$("b12").value = b + " x 12 = " + (b * 12);
		$("b13").value = b + " x 13 = " + (b * 13);
		$("b14").value = b + " x 14 = " + (b * 14);
		$("b15").value = b + " x 15 = " + (b * 15);
		$("b16").value = b + " x 16 = " + (b * 16);
		$("b17").value = b + " x 17 = " + (b * 17);
		$("b18").value = b + " x 18 = " + (b * 18);
		$("b19").value = b + " x 19 = " + (b * 19);
		$("b20").value = b + " x 20 = " + (b * 20);
	}
}

Open in new window


and html

<table  class="hiddenAB">
<tr>
<td>Value for a</td>
<td><input type = "text" id="a" /></td>
</tr>
<tr>
	<td>Value for b</td>
	<td><input type = "text" id="b" /></td>
</tr>
<tr>
	<td><input type="button" id="resettimestables" value="Reset Table" /></td>
	<td><input type="button" id="calculatetimestables" value="Create Table" /></td>
					
</tr>
</table>
<table  class="table1">
<tr>
	<th>Table a</th>
	<th>Table b</th>
</tr>
<tr>
	<td><input type = "text" id="a1" value="a x 1 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b1" value="b x 1 = ?" disabled="disabled" /></td>
</tr>
<tr>
        <td><input type = "text" id="a2" value="a x 2 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b2" value="b x 2 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a3" value="a x 3 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b3" value="b x 3 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a4" value="a x 4 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b4" value="b x 4 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a5" value="a x 5 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b5" value="b x 5 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a6" value="a x 6 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b6" value="b x 6 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a7" value="a x 7 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b7" value="b x 7 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a8" value="a x 8 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b8" value="b x 8 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a9" value="a x 9 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b9" value="b x 9 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a10" value="a x 10 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b10" value="b x 10 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a11" value="a x 11 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b11" value="b x 11 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a12" value="a x 12 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b12" value="b x 12 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a13" value="a x 13 = ?" disabled="disabled" /></td>
        <td><input type = "text" id="b13" value="b x 13 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a14" value="a x 14 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b14" value="b x 14 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a15" value="a x 15 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b15" value="b x 15 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a16" value="a x 16 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b16" value="b x 16 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a17" value="a x 17 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b17" value="b x 17 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a18" value="a x 18 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b18" value="b x 18 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a19" value="a x 19 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b19" value="b x 19 = ?" disabled="disabled" /></td>
</tr>
<tr>
	<td><input type = "text" id="a20" value="a x 20 = ?" disabled="disabled" /></td>
	<td><input type = "text" id="b20" value="b x 20 = ?" disabled="disabled" /></td>
</tr>
</table>

Open in new window

0
Comment
Question by:martatkacz
  • 2
3 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40028524
Can you use jQuery?

http://jsfiddle.net/xJVWa/

HTML
<input type="text" name="val" id="val">
<input type="button" value="Click Me" id="process">
<div id="result">          
</div>

Open in new window


JavaScript
$("#process").click(function(){
    result=""
    for(c=1;c<21;c++){
     result+=$("#val").val() + " * " + c + " = " + $("#val").val()*c + "<br>"
    }
    $("#result").html(result)
})

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40028534
Pure JS version

http://jsfiddle.net/xJVWa/1/

HTML
<input type="text" name="val" id="val">
<input type="button" value="Click Me" id="process" onclick="process()">
<div id="result">          
</div>

Open in new window


JavaScript
function process(){
    result="";
    startval=document.getElementById("val").value;
    for(c=1;c<21;c++){
     result+=startval + " * " + c + " = " + startval*c + "<br>"
    }
    document.getElementById("result").innerHTML=result;
}

Open in new window



jQuery not really needed - though it appears you are using some kind of framework...
0
 

Author Comment

by:martatkacz
ID: 40028564
I haven't used jquery, and we were asked for pure JavaScript
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Place text over image using CSS 6 44
Wordpress plugins not working in html 3 26
Adding Row and Cell on a table 14 20
How to resize a div in html 3 17
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question