# JavaScript calculator

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);
}
}
``````

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>
``````
###### Who is Participating?

Commented:
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>
``````

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;
}
``````

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

Commented:
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>
``````

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

Author Commented:
I haven't used jquery, and we were asked for pure JavaScript
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.