Rafael Borges Rafael Borges - 16 days ago 4
HTML Question

Javascript Rule of Three it's not working

This rule of three needs to identify were is the X or Y and then calculate it from it's position and the type of the proporcion (direct or inverse). But for some reason the page in HTML it's returning the value "ERROR!" (set on the else condition).



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="radio" id="inv">Inversamente</input>
<input type="radio" id="dir">Diretamente</input><br />
<input type="text" id="I1"></input>
<input type="text" id="I2"></input><br />
<input type="text" id="I3"></input>
<input type="text" id="I4"></input><br /><br />
<button id="button" onclick="button()">Calcular</button>
<script type="text/javascript">
function button() {
var i1 = parseInt(document.getElementById("I1"));
var i2 = parseInt(document.getElementById("I2"));
var i3 = parseInt(document.getElementById("I3"));
var i4 = parseInt(document.getElementById("I4"));
var i5 = document.getElementById("inv").value;
var i6 = document.getElementById("dir").value;
if (i1.value == "x" && i5.value === true || i1.value =="y" && i5.value === true){
var r1 = i3.value*i4.value/i2.value;
document.write("Resultado é " + r1);
}
else if (i1.value == "x" && i6.value === true || i1.value =="y" && i6.value === true) {
var r2 = i3.value*i2.value/i4.value;
document.write("Resultado é " + r2);
}
else if (i2.value == "x" && i5.value === true || i2.value =="y" && i5.value === true) {
var r3 = i3.value*i4.value/i1.value;
document.write("Resultado é " + r3);
}
else if (i2.value == "x" && i6.value === true || i2.value =="y" && i6.value ===true) {
var r4 = i1.value*i4.value/i3.value;
document.write("Resultado é " + r4);
}
else if (i3.value == "x" && i5.value === true || i3.value =="y" && i5.value === true) {
var r5 = i1.value*i2.value/i4.value;
document.write("Resultado é " + r5);
}
else if (i3.value == "x" && i6.value === true || i3.value =="y" && i6.value === true) {
var r6 = i1.value*i4.value/i2.value;
document.write("Resultado é " + r6);
}
else if (i4.value == "x" && i5.value === true || i4.value =="y" && i5.value === true) {
var r7 = i1.value*i2.value/i3.value;
document.write("Resultado é " + r7);
}
else if (i4.value == "x" && i6.value === true || i4.value =="y" && i6.value === true) {
var r8 = i2.value*i3.value/i1.value;
document.write("Resultado é " + r8);
}
else{
document.write("ERROR!");//whatever the case of the rule of the above, it aways return "ERROR!"
}
}
</script>





I'm sorry for my english. I'm brazilian.

Answer

You were running parseInt() on a DOM element instead of the element's value, but you're also looking for character input into anyone of those inputs. I've corrected the issues regarding value comparisons, but if all the inputs are not filled, you'll receive a NaN response.

Corrected JS:

function button() {
  var i1 = document.getElementById("I1");
  var i2 = document.getElementById("I2");
  var i3 = document.getElementById("I3");
  var i4 = document.getElementById("I4");
  var i5 = document.getElementById("inv");
  var i6 = document.getElementById("dir");
  console.log(i1.value);
  console.log(i2.value);
  console.log(i3.value);
  console.log(i4.value);
  console.log(i5.checked);
  console.log(i6.checked);

  if (i1.value == "x" && i5.checked === true || i1.value == "y" && i5.checked === true) {
    var r1 = i3.value * i4.value / i2.value;
    console.log("Resultado é " + r1);
  } else if (i1.value == "x" && i6.value === true || i1.value == "y" && i6.value === true) {
    var r2 = i3.value * i2.value / i4.value;
    console.log("Resultado é " + r2);
  } else if (i2.value == "x" && i5.value === true || i2.value == "y" && i5.value === true) {
    var r3 = i3.value * i4.value / i1.value;
    console.log("Resultado é " + r3);
  } else if (i2.value == "x" && i6.value === true || i2.value == "y" && i6.value === true) {
    var r4 = i1.value * i4.value / i3.value;
    console.log("Resultado é " + r4);
  } else if (i3.value == "x" && i5.value === true || i3.value == "y" && i5.value === true) {
    var r5 = i1.value * i2.value / i4.value;
    console.log("Resultado é " + r5);
  } else if (i3.value == "x" && i6.value === true || i3.value == "y" && i6.value === true) {
    var r6 = i1.value * i4.value / i2.value;
    console.log("Resultado é " + r6);
  } else if (i4.value == "x" && i5.value === true || i4.value == "y" && i5.value === true) {
    var r7 = i1.value * i2.value / i3.value;
    console.log("Resultado é " + r7);
  } else if (i4.value == "x" && i6.value === true || i4.value == "y" && i6.value === true) {
    var r8 = i2.value * i3.value / i1.value;
    console.log("Resultado é " + r8);
  } else {
    console.log("ERROR!"); //whatever the case of the rule of the above, it aways return "ERROR!"
  }
}
Comments