CODEWITHSUNDEEP
javascripthtml
Péter Pintér
Péter Pintér

Reputation: 65

Javascript / HTML calculator, need something else method for result

I'm in secondary school, and we learning HTML and javascript now. I'm making a calculator (with some help from the internet) and I found eval() function. We basically haven't learned that so I need to change it to something else. Here's the code for my calculator: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Számológép</title>
</head>

<body>
	<script>
		function beker(szam) {
			document.szamologep.eredmeny.value = document.szamologep.eredmeny.value + szam;
		}
		function szamol() {
			var a = document.szamologep.eredmeny.value;
			if (a) {
				document.szamologep.eredmeny.value = eval(a)
			}
		}
	</script>

	<h2 align="center">Számológép!</h2>
	<form name="szamologep">
		<table border="2" align="center">
			<tr>
				<td colspan="4"><input type="text" name="eredmeny"/></td>
			</tr>
			<tr>
				<td><input type="button" value="1" onclick="beker(1)"/></td>
				<td><input type="button" value="2" onclick="beker(2)"/></td>
				<td><input type="button" value="3" onclick="beker(3)"/></td>
				<td><input type="button" value="+" onclick="beker('+')"/></td>
			</tr>
			<tr>
				<td><input type="button" value="4" onclick="beker(4)"/></td>
				<td><input type="button" value="5" onclick="beker(5)"/></td>
				<td><input type="button" value="6" onclick="beker(6)"/></td>
				<td><input type="button" value="-" onclick="beker('-')"/></td>
			</tr>
			<tr>
				<td><input type="button" value="7" onclick="beker(7)"/></td>
				<td><input type="button" value="8" onclick="beker(8)"/></td>
				<td><input type="button" value="9" onclick="beker(9)"/></td>
				<td><input type="button" value="*" onclick="beker('*')"/></td>
			</tr>
			<tr>
				<td><input type="reset" value="C"/></td>
				<td><input type="button" value="0" onclick="beker(0)"/></td>
				<td><input type="button" value="=" onclick="szamol()"/></td>
				<td><input type="button" value="/" onclick="beker('/')"/></td>
			</tr>
		</table>
	</form>
</body>

</html>

So I need some other way in the szamol().

We made an other calculator but with radio buttons. I'm adding the code as well, so you could se what we learned.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Névtelen 1</title>
<script>
 function szamol()
 {
  var a=parseInt(document.urlap.szam1.value);
  var b=parseInt(document.urlap.szam2.value);
  var e=0;
  if(document.urlap.muvelet[0].checked)e=a+b;
   if(document.urlap.muvelet[1].checked)e=a-b;
    if(document.urlap.muvelet[2].checked)e=a*b;
     if((document.urlap.muvelet[3].checked) &&(b!=0))e=a/b;
     if((document.urlap.muvelet[3].checked) &&(b==0))e="Nullával nem osztunk";
     
     if(document.urlap.muvelet[4].checked)
                                             {
                                              e=1;
                                              for(i=1;i<=b;i++)
                                              
                                              e=e*a;
                                             }
   document.urlap.eredmeny.value=e;
 }
</script>
</head>

<body>
 <form name="urlap">
 <table>
 <tr>
  <td>Szam1<input type="number" name="szam1" value="0">
  <td>Szam2<input type="number" name="szam2" value="0">
 </tr>
 <tr>
  <td>Összeadás<input type="radio" name="muvelet" checked>
      Kivon<input type="radio" name="muvelet">
      Szoroz<input type="radio" name="muvelet">
      Oszt<input type="radio" name="muvelet">
      Hatvany<input type="radio" name="muvelet">
 </tr>
 <tr>
  <td><input type="button" value="OK" onclick="szamol()">
  <td><input type="reset" value="Reset">
 </tr>
 <tr>
  <td>Eredmény:<input type="text" name="eredmeny">
 </tr>
 </table>
 
 </form>
</body>

</html>

Upvotes: 4

Views: 99

Answers (1)

Ryan
Ryan

Reputation: 481

Continuing on the comment left by Nikos M. you'll need a way to determine which operator you're using. The code below will only account for one operator but will do what you're looking for if that's all you need to cover.

To clarify the bold text above, this will work for expressions that look like:

X + Y, X - Y, X * Y, and X / Y.

But won't work for expressions like:

X + Y + Z, X * Y + Z / P etc.

function szamol() {
        var a = document.szamologep.eredmeny.value;
        if (a) {
            var answer;
            var split = a.split(/([+,\-,*,\/]){1}/g);
            console.log('Split: ' + split);
            var first = Number(split[0]);
            var operator = String(split[1]);
            var second = Number(split[2]);
            switch(operator){
                case '+':
                    answer = first + second;
                break;
                case '-':
                    answer = first - second;
                break;
                case '*':
                    answer = first * second;
                break;
                case '/':
                    answer = first / second;
                break;
            }
            document.szamologep.eredmeny.value = answer;
        }
    }

We set up our empty answer variable, and then we split the a value on any operator +, -, *, \ using a regular expression. The first element of our split is the first number, the second element of our split is our operator, and the third element of our split is the second number.

After we have our pieces, we create a switch case that checks to see which operator we're using, and does math based on that. Because the input is a text input - the JavaScript assumes we're working with strings - which is why I had to typecast the first and second variables as Number() when setting them.

Upvotes: 2

Related Questions