Создание простой калькулятор затрат в html javascript. Вызов функции JS из кнопки HTML. Возвращение значения в JS

Question

Я пытаюсь создать простой калькулятор затрат в HTML Javascript, но мне не удается вызвать функцию JS с помощью кнопки HTML. Я знаю, что проблема должна быть связана с тем, как я называю свою функцию или как я показываю результат вычисления, или и то, и другое.

Если кто-нибудь может показать мне, где я ошибаюсь, и какая правильная практика была бы весьма признательна.

Описание: Код: http://codepen.io/FredHair/pen/FgJAd (Он возвращает Не определено для ответа).

Это мой 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> 

Это 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

Спасибо.

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>

Вы не передавая значение выч ...

обновление ваш JS код так:

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; 

    } 

Вместо получить значение известково в параметре получить это по методу.

Answer 2

Вы не подбирая выбранный вариант в раскрывающемся меню, которое вы используете в switch - переходящем в calc функции ничего не делает, потому что calc является undefined. Вот код, который поможет вам:

function calculator() { 
    var choice = document.getElementById("choice"); 
    var calc = choice.options[choice.selectedIndex].value; 

DEMO