multiple answers from one Javascript input

Question

<script language="JavaScript">
<!--
window.addEventListener("DOMContentLoaded", function(){
var a= document.querySelector("input[name='a']");
var b= document.querySelector("input[name='b']");
var c= document.querySelector("input[name='c']");
var x= document.getElementById("x");
var y = document.getElementById("y");
var z = document.getElementById("z");
var btn = document.getElementById("calc");

btn.addEventListener("click", calculate);

function calculate() {


var aVal = a.value.trim();
var bVal = b.value.trim();
var cVal = c.value.trim();

if(aVal > 0 && bVal > 0 && cVal > 0){   

  var ansx = aVal*(1-(cVal/100));
  console.log("Answer = " + ansx);

  ansx = ansx * 100;
  console.log("Answer times 100 = " + ansx);

  ansx = Math.ceil(ansx);
  console.log("Answer times 100, rounded up to nearest whole number = " + ansx);

  ansx = ansx/ 100;
  console.log("Answer divided back by 100 = " + x);

  x.textContent = ansx;

  var ansy = (ansx/2.2)/((((bVal*0.0328)*12)*0.0254)*(((bVal*0.0328)*12)*0.0254))*2.20462
  console.log("Answer = " + ansy);

  ansy = ansy * 100;
  console.log("Answer times 100 = " + ansy);

  ansy = Math.ceil(ansy);
  console.log("Answer times 100, rounded up to nearest whole number = " + ansy);

  ansy = ansy/ 100;
  console.log("Answer divided back by 100 = " + ansy);

  y.textContent = ansy;

  var ansz = ansy+(6.1*(1.8-(((bVal*0.0328)*12)*0.0254)))
  console.log("Answer = " + ansz);

  ansz = ansz * 100;
  console.log("Answer times 100 = " + ansz);

  // Next, round answer up to nearest whole number
  ansz = Math.ceil(ansz);
  console.log("Answer times 100, rounded up to nearest whole number = " + ansz);

  ansz = ansz/ 100;
  console.log("Answer divided back by 100 = " + ansz);

  z.textContent = ansz;

} else{
  alert("Please Fill form in correctly")
  }
  }
  });
</script>



<div class=form2>
 <form name="form">
   <label for="a" class="left">a: </label><input type="text" 
name="a" id="a" size="10"><br>
   <label for="b" class="left">b: </label><input type="text" 
name="b" id="b" size="10"><br>
   <label for="c" class="left">c: </label><input type="text" 
 name="c" id="c" size="10">  
<div><input type="button" value="Calculate" id="calc"></div>
<div class="results">
  <span class="left">x: </span><span id="x"></span><br>
  <span class="left">y: </span><span id="y"></span><br>
  <span class="left">z: </span><span id="z"></span>
</div>
<div class="after">
  <input type="reset" value="Reset">
</div>
</form>
</div>

I am using the above to input 3 values a,b,c. these values should produce a result -x. x should then be used again with the input a,b and c to produce y and the same again with z as shown with var x, var y, and var z.

I am struggling, however, to attain any answer other than NaN

can anyone see what I am doing wrong.

I have managed to get it working coding things slightly different in a similar manner to my last question ( rounding answers to decimal places ) but have been advised that I had done things incorrectly. So am trying to work this calculator in a similar fashion to what I have been advised

Sorry I have edited the above... I have changed

var ansx = a*(1-(c/100));

to

var ansx = aVal*(1-(cVal/100));

I am still not getting an answer though :-(

Where you have made your calculation, you have used the input elements rather than the values. `var ansx = a*(1-(c/100));` In the above answer, `a` has been assigned to `document.querySelector("input[name='a']")`. — benbrunton, Jul 24 '17 at 18:47

score 0 · Answer 1 · answered Jul 24 '17 at 18:48

You're storing the values in aVal, bVal, and cVal. But you're trying to do the math on the form inputs a, b, and c, which aren't numbers, therefore NaN is the result.

if (aVal > 0 && bVal > 0 && cVal > 0) {
  var ansx = a * (1 - (c / 100)); // should be aVal * (1 - (cVal / 100))

You might consider getting into the habit of using more explicit variable names, which helps prevent this kind of mistake. Or use fewer intermediate variables (for example if you'd just captured each value in the first place, instead of capturing the form element in one variable and the value in another, you wouldn't have had an extra set of variables to get mixed up.)

score 0 · Answer 2 · answered Jul 26 '17 at 15:31

0

Sorry People,

I have solved my own problem... inputs a and b where used in a function above this one on the same page which must have been causing some confusion. I have changed the letters to c, d and e and now it works fine

Sorry again

answered Jul 26 '17 at 15:31

PaulMcF87

385
5
18

multiple answers from one Javascript input

2 Answers2