Javascript Calculator(Returns no value)

Question

Javascript Calculator(Returns no value)

Asked 4 years, 8 months ago

Viewed 109 times

-2

My simple javascript calculator design (containing some buttons),does not return any value. Even with Alert nothing works.

function testResults (form) {
	var operacao= form.operacao.value;
	//entrada dados da primeira parte
	var num1 = form.num1.value;
	var num2 = form.num2.value;
	var num3 = form.num3.value;
	var num4 = form.num4.value;
	var num5 = form.num5.value;
	var num6 = form.num6.value;
	var num7 = form.num7.value;
	var num8 = form.num8.value;
	var num9 = form.num9.value;
	var num0 = form.num0.value;
	//entrada dados segunda parte
	var nnum1 = form.nnum1.value;
	var nnum2 = form.nnum2.value;
	var nnum3 = form.nnum3.value;
	var nnum4 = form.nnum4.value;
	var nnum5 = form.nnum5.value;
	var nnum6 = form.nnum6.value;
	var nnum7 = form.nnum7.value;
	var nnum8 = form.nnum8.value;
	var nnum9 = form.nnum9.value;
	var nnum10 = form.nnum0.value;
	var total1,total2,total3;
	//parte que soma os campos
	if (num1 == 1) {
		total1=total1+1;
	};
	if (num2 == 2) {
		total1=total1+2;
	};
	if (num3 == 3) {
		total1=total1+3;
	};
	if (num4 == 4) {
		total1=total1+4;
	};
	if (num5 == 5) {
		total1=total1+5;
	};
	if (num6 == 6) {
		total1=total1+6;
	};
	if (num7 == 7) {
		total1=total1+7;
	};
	if (num8 == 8) {
		total1=total1+8;
	};
	if (num9 == 9) {
		total1=total1+9;
	};
	if (num0 == 0) {
		total1=total1+0;
	};
	// parte soma segundo campo
	if (nnum1 == 1) {
		total2=total2+1;
	};
	if (nnum2 == 2) {
		total2=total2+2;
	};
	if (nnum3 == 3) {
		total2=total2+3;
	};
	if (nnum4 == 4) {
		total2=total2+4;
	};
	if (nnum5 == 5) {
		total2=total2+5;
	};
	if (nnum6 == 6) {
		total2=total2+6;
	};
	if (nnum7 == 7) {
		total2=total2+7;
	};
	if (nnum8 == 8) {
		total2=total2+8;
	};
	if (nnum9 == 9) {
		total2=total2+9;
	};
	if (nnum0 == 0) {
		total2=total2+0;
	};
	window.alert("Primeira variavel"+total2+"Segunda variavel"+total11);
	console.log("Variavel 1 ="+total1);
	console.log("Variavel 2 ="+total2);
	switch (operacao) {
		case "posi":
		total3=total2+total1;
		window.alert(total3);
		break;
		case "subt":
		total3=total2-total1;
		window.alert(total3);
		break;
		case "mult":
		total3=total2*total1;
		window.alert(total3);
		break;
		case "divi":
		total3=total2/total1;
		window.alert(total3);
		break;
		default:
		window.alert("Erro: Selecione uma operacao");
	};

};

.butao1{
	margin-top:10%;
}
.butao2{
	margin-left:55%;
}

<html>
	<head>
		<title>Calculadora</title>
		<link type="text/css" rel="stylesheet" href="index.css">
		<script src="index.js"></script>
	</head>
	<body>
		<div id="titulo">Calculadora</div>
		<form method="GET" action="">
			+<input type="radio" name="operacao" value="posi">
			*<input type="radio" name="operacao" value="mult">
			-<input type="radio" name="operacao" value="subt">
			/<input type="radio" name="operacao" value="divi">
			<div class="butao1">
			<input type="radio" name="open">
			0<input type="checkbox" name="num0" value="0">
			1<input type="checkbox" name="num1" value="1">
			2<input type="checkbox" name="num2" value="2">
			3<input type="checkbox" name="num3" value="3">
			4<input type="checkbox" name="num4" value="4">
			5<input type="checkbox" name="num5" value="5">
			6<input type="checkbox" name="num6" value="6">
			7<input type="checkbox" name="num7" value="7">
			8<input type="checkbox" name="num8" value="8">
			9<input type="checkbox" name="num9" value="9">
			</div>
			<div class="butao2">
			0<input type="checkbox" name="nnum0" value="0">
			1<input type="checkbox" name="nnum1" value="1">
			2<input type="checkbox" name="nnum2" value="2">
			3<input type="checkbox" name="nnum3" value="3">
			4<input type="checkbox" name="nnum4" value="4">
			5<input type="checkbox" name="nnum5" value="5">
			6<input type="checkbox" name="nnum6" value="6">
			7<input type="checkbox" name="nnum7" value="7">
			8<input type="checkbox" name="nnum8" value="8">
			9<input type="checkbox" name="nnum9" value="9">
			</div>
			<input type="submit" onclick="testResults(this.form)">
		</form>
	</body>
</html>

Despite all other problems, your error is causing in your last if (nnum0 == 0). You have declared var nnum10 = form.nnum0.value; Just change nnum10 to nnum0. .

– Paulo Souza

2019/10/15 at 18:14

2 answers

Browser other questions tagged javascript mathematics alert

You are not signed in. Login or sign up in order to post.

by Aiden Pearce • **331** points · Answer 1 · 2019-10-15T18:14:39+00:00

Try replacing your Names with Ids, and make the recovery value like this:

HTML:
<input type="checkbox" id="num1" value="1">

JAVASCRIPT:
var num1 = document.getElementById("num1").value;

After adjusting for all tags in the form and javascript, you only need to adapt to your logic.

I suggest after taking a look at JQUERY, it will save you a lot of time in your code and it is easier too

by Daniel Mendes • **6,211** points · Answer 2 · 2019-10-15T18:50:58+00:00

youboll, there’s enough incorrect stuff in your code.

Correcting some variables that have not been declared, such as the nnum10 and the total11, there were some errors in the validations (IF), finally I initialized the sum variables with zero, because as they had no initial value, it was to generate a Nan during the calculation.

You were taking the value of the checkbox and performing an equality check, these validations were always true, even though the checkbox was not marked, so I changed these snippets to just check if the checkbox is marked, thus adding the values.

After these corrections of variables and conditions, your calculator worked, but still fits a great refactoring!

I left some comments in the code to better guide the changes I made, see also that I made a Return false no onsubmit, this was done to avoid that when clicking the page is redirected, because form like this with Submit is not ideal for a calculator application.

function testResults(form) {

  var operacao= form.operacao.value;

  //O checkbox já tem o valor correto, portanto a ideia é ver se ele foi marcado
  //entrada dados da primeira parte
  var num0 = form.num0.checked;
  var num1 = form.num1.checked;
  var num2 = form.num2.checked;
  var num3 = form.num3.checked;
  var num4 = form.num4.checked;
  var num5 = form.num5.checked;
  var num6 = form.num6.checked;
  var num7 = form.num7.checked;
  var num8 = form.num8.checked;
  var num9 = form.num9.checked;
  //entrada dados segunda parte
  var nnum1 = form.nnum1.checked;
  var nnum2 = form.nnum2.checked;
  var nnum3 = form.nnum3.checked;
  var nnum4 = form.nnum4.checked;
  var nnum5 = form.nnum5.checked;
  var nnum6 = form.nnum6.checked;
  var nnum7 = form.nnum7.checked;
  var nnum8 = form.nnum8.checked;
  var nnum9 = form.nnum9.checked;
  var nnum0 = form.nnum1.checked;

  //Inicializei as variáveis
  var total1 = 0;
  var total2 = 0;
  var total3 = 0;

  //Se for marcado, você faz a soma
  //parte que soma os campos
  if (num1) {
    total1=total1+1;
  }
  if (num2) {
    total1=total1+2;
  }
  if (num3) {
    total1=total1+3;
  }
  if (num4) {
    total1=total1+4;
  }
  if (num5) {
    total1=total1+5;
  }
  if (num6) {
    total1=total1+6;
  }
  if (num7) {
    total1=total1+7;
  }
  if (num8) {
    total1=total1+8;
  }
  if (num9) {
    total1=total1+9;
  }
  //Não faz sentido somar zero
  //if (num0) {
  //	total1=total1+0;
  //};

  // parte soma segundo campo
  if (nnum1) {
    total2=total2+1;
  }
  if (nnum2) {
    total2=total2+2;
  }
  if (nnum3) {
    total2=total2+3;
  }
  if (nnum4) {
    total2=total2+4;
  }
  if (nnum5) {
    total2=total2+5;
  }
  if (nnum6) {
    total2=total2+6;
  }
  if (nnum7) {
    total2=total2+7;
  }
  if (nnum8) {
    total2=total2+8;
  }
  if (nnum9) {
    total2=total2+9;
  }

  //Não faz sentido somar zero
  //if (nnum0) {
  //	total2=total2+0;
  //};

  window.alert("Primeira variavel: " + total1 + "\nSegunda variavel: "+total2);
  console.log("Variavel 1 = " + total1);
  console.log("Variavel 2 = " + total2);

  switch (operacao) {
    case "posi":
      total3=total2+total1;
      window.alert(total3);
      break;
    case "subt":
      total3=total2-total1;
      window.alert(total3);
      break;
    case "mult":
      total3=total2*total1;
      window.alert(total3);
      break;
    case "divi":
      total3=total2/total1;
      window.alert(total3);
      break;
    default:
      window.alert("Erro: Selecione uma operacao");
  }
}

.butao1{
  margin-top:10%;
}

.butao2{
  margin-left:55%;
}

<html>
  <head>
    <title>Calculadora</title>
    <link type="text/css" rel="stylesheet" href="index.css">
    <script src="index.js"></script>
  </head>

  <body>
    <div id="titulo">Calculadora</div>
    <form method="GET" onsubmit="return false" action="">
      +<input type="radio" name="operacao" value="posi">
      *<input type="radio" name="operacao" value="mult">
      -<input type="radio" name="operacao" value="subt">
      /<input type="radio" name="operacao" value="divi">
      <div class="butao1">

      <!--Não utilizado-->
      <!--<input type="radio" name="open">-->
      0<input type="checkbox" name="num0" value="0">
      1<input type="checkbox" name="num1" value="1">
      2<input type="checkbox" name="num2" value="2">
      3<input type="checkbox" name="num3" value="3">
      4<input type="checkbox" name="num4" value="4">
      5<input type="checkbox" name="num5" value="5">
      6<input type="checkbox" name="num6" value="6">
      7<input type="checkbox" name="num7" value="7">
      8<input type="checkbox" name="num8" value="8">
      9<input type="checkbox" name="num9" value="9">
      </div>
      <div class="butao2">
      0<input type="checkbox" name="nnum0" value="0">
      1<input type="checkbox" name="nnum1" value="1">
      2<input type="checkbox" name="nnum2" value="2">
      3<input type="checkbox" name="nnum3" value="3">
      4<input type="checkbox" name="nnum4" value="4">
      5<input type="checkbox" name="nnum5" value="5">
      6<input type="checkbox" name="nnum6" value="6">
      7<input type="checkbox" name="nnum7" value="7">
      8<input type="checkbox" name="nnum8" value="8">
      9<input type="checkbox" name="nnum9" value="9">
      </div>
      <input type="submit" onclick="testResults(this.form)">
    </form>
  </body>
</html>