Creating a simple cost estimator in html javascript. Calling a JS function from HTML button. Returning a value in JS

Question

I am trying to create a simple cost Estimator in HTML Javascript but I am having trouble calling a JS function with a HTML Button. I know the problem must be due to how I am calling my function or how I am displaying the result of the calculation, or both.

If any one could show me where I am going wrong and what is the correct practise it would be greatly appreciated.

Here is the Codepen: http://codepen.io/FredHair/pen/FgJAd (It returns Undefined for the answer).

This is my HTML:

<div>
 <h1>Cost Estimator</h1>
 <form>
 <input type= "numbers" id="x" placeholder = "Length" /><br />
 <input type= "numbers" id="y" placeholder = "Width"/><br />
 <input type= "numbers" id="z" placeholder = "Height"/><br />

 <select id="choice" >
    <option value = "" ></option>
    <option value = "1">option 1</option>
    <option value = "2">0ption 2</option>
 <option value = "3">option 3</option>
  </select>
  <br/>
  <br/>
  <input id= "est" type="button" value = "Estimate" onclick= "calculator()"/>
  <input id= "reset" type="reset" value = "Reset"/>
</form>
<h1 id="result"> = </h1>
</div>

This Is the JS:

function calculator(calc){
    var x = Number(document.getElementById("x").value);
    var y = Number(document.getElementById("y").value);
 var z = Number(document.getElementById("z").value);
 var p = Number(30);
 var result;
    switch(calc){
        case"1" : result = z * p; 
    break;
        case"2" : result = x * p + 50; 
    break;
        case"3" : result = x * p + 30; 
    break;
}
document.getElementById("result").innerHTML = " = " + result; 
}

http://codepen.io/FredHair/pen/FgJAd

Thanks.

Answer 1

function calculator() {
  var x = Number(document.getElementById("x").value);
  var y = Number(document.getElementById("y").value);
  var z = Number(document.getElementById("z").value);
  var p = Number(30);
  var result;
  var calc = document.getElementById("choice").value
  switch (calc) {
    case "1":
      result = z * p;
      break;
    case "2":
      result = x * p + 50;
      break;
    case "3":
      result = x * p + 30;
      break;

  }

  document.getElementById("result").innerHTML = " = " + result;

}

<div>
  <h1>Cost Estimator</h1>
  <form>
    <input type="numbers" id="x" placeholder="Length" />
    <br />
    <input type="numbers" id="y" placeholder="Width" />
    <br />
    <input type="numbers" id="z" placeholder="Height" />
    <br />

    <select id="choice">
      <option value=""></option>
      <option value="1">option 1</option>
      <option value="2">0ption 2</option>
      <option value="3">option 3</option>
    </select>
    <br/>
    <br/>
    <input id="est" type="button" value="Estimate" onclick="calculator()" />
    <input id="reset" type="reset" value="Reset" />
  </form>
  <h1 id="result"> = </h1>
</div>

You are not passing the value calc...

update your js code like this:

function calculator(){
        var x = Number(document.getElementById("x").value);
        var y = Number(document.getElementById("y").value);
     var z = Number(document.getElementById("z").value);
     var p = Number(30);
     var result;
  var calc = document.getElementById("choice").value
        switch(calc){
            case"1" : result = z * p; 
        break;
            case"2" : result = x * p + 50; 
        break;
            case"3" : result = x * p + 30; 
        break;

    }

Instead get the value of calc in parameter get it under the method.