Javascript Text Input Calculator

Я немного новичок в javascript, и я пытаюсь сделать базовый калькулятор с тремя текстовыми вводами, текстовым полем 1-го числа, текстовым полем операций и текстовым полем второго номера, но это не распечатать текст, когда я нажимаю кнопку, или использовать любой другой метод для запуска события. Это мой код:Javascript Text Input Calculator

<html> 
<script> 
function calc() 
{ 
    var D = ""; 
    var A = document.getElementById("num1").value; 
    var B = document.getElementById("op").value; 
    var C = document.getElementById("num2").value; 
    if(B == "+") 
    { 
     D = A+C; 
    } 
    elseif(B == "-") 
    { 
     D = A-C; 
    } 
    elseif(B == "*") 
    { 
     D = A*C; 
    } 
    elseif(B == "/") 
    { 
     D = A/C; 
    } 
    document.getElementById("result").innerHTML = D; 
} 
</script> 

<body> 
    <input type="text" id="num1" name="num1" /> 
    <input type="text" id="op" name="op" /> 
    <input type="text" id="num2" name="num2" /> 
    <br /> 
    <input type="button" value="Solve" onclick="calc()" /> 

    <p id="result" name="r1"> 
     <br /> 
    </p> 

</body> 
</html>

источник

2013-04-14 Brian Johnson

положил ваш скрипт в нижнюю часть страницы и использовал parseFloat (A, 10) и тот же на C – Givi

Это else if не elseif. Также вам нужно использовать parseInt на A + C, иначе он будет обрабатывать ваши строки как ... ну, строки. Вы должны были увидеть ошибку elseif в своем браузере. Вы используете что-то вроде firebug? Если нет, начните. Пусть инструменты помогут вам.

источник

2013-04-14 00:50:14 aquinas

(⌒ ▽ ⌒) спасибо, я не осознал, что если. –

Я хотел бы предложить следующее (пояснения комментировали в самом коде):

function calc() { 
     /* finds out whether the browser uses textContent (Webkit, Opera, Mozilla...) 
      or innerText (Microsoft) to set the text of an element/node */ 
    var textType = Node.textContent ? 'textContent' : 'innerText', 
     /* uses parseFloat to create numbers (where possible) from the entered value 
      if parseFloat fails to find a number (it's empty or nonsensical) 
      then a 0 is used instead (to prevent NaN being the output). */ 
     num1 = parseFloat(document.getElementById('num1').value) || 0, 
     num2 = parseFloat(document.getElementById('num2').value) || 0, 
     // retrieves the result element 
     result = document.getElementById('result'); 

    // switch is used to avoid lots of 'if'/'else if' statements, 
    // .replace() is used to remove leading, and trailing, whitespace 
    // could use .trim() instead, but that'd need a shim for (older?) IE 
    switch (document.getElementById('op').value.replace(/\s/g,'')){ 
     // if the entered value is: 
     // a '+' then we set the result element's text to the sum 
     case '+': 
      result[textType] = num1 + num2; 
      break; 
     // and so on... 
     case '-': 
      result[textType] = num1 - num2; 
      break; 
     case '*': 
      result[textType] = num1 * num2; 
      break; 
     case '/': 
      result[textType] = num1/num2; 
      break; 
     // because people are going to try, give a default message if a non-math 
     // operand is used 
     default: 
      result[textType] = 'Seriously? You wanted to try math with that operand? Now stop being silly.' 
      break; 
    } 
}

JS Fiddle demo.

Ссылки:

источник

2013-04-14 01:12:11

я сделал бы вещи немного по-другому, но ответить на ваш вопрос и просто получить код работает, я сделал следующее:

Вот ваш переработан код:

<html> 
<script> 
function calc(form) { 

var D = "0"; 
var A = document.getElementById("num1").value; 
var B = document.getElementById("op").value; 
var C = document.getElementById("num2").value; 

if (B === "+") 
{ 
D = parseInt(A)+parseInt(C); 
} 
else if(B === "-") 
{ 
D = parseInt(A)-parseInt(C); 
} 
else if(B === "*") 
{ 
D = parseInt(A)*parseInt(C); 
} 
else if (B === "/") 
{ 
D = parseInt(A)/parseInt(C); 
} 
document.getElementById("result").innerHTML = D; 
return false; 
} 
</script> 
<body> 

<input type="text" id="num1" name="num1" /> 
<input type="text" id="op" name="op" /> 
<input type="text" id="num2" name="num2" /> 
<br /> 
<input type="button" value="Solve" onClick="calc(this)"> 

<p id="result" name="r1"> 
<br /> 
</p> 

</body> 
</html>

Я parseint(), потому что ваши выражения в ваших операторах if обрабатывали такие значения, как текст.

Далее нам нужно использовать === Три равенства, которые говорят, что A действительно равно + или что-то второе значение ввода.

Третий был onclick, я сделал (это) и подал обратно форму, как вы можете видеть в строке, которая говорит функцию calc.

Для хорошей меры я добавил возврат false; для предотвращения подачи формы (но она будет работать без нее).

Также, как и другие плакаты, указано иначе, если и не elseif.

Надеюсь, это полезно. Опять же, я бы сделал все по-другому, но получил работу с некоторыми объяснениями.

источник

2013-04-14 01:49:47

Просто примечание ... Параметр() обрабатывал все числа, но parsefloat() будет обрабатывать десятичные знаки. Хорошее мышление на плакате выше. –

Существует способ, вы можете сделать это с одним полем ввода:

function findOps(s) { 
    for (var i = 0; i < s.length; i++) { 
    if (s[i] == "+") 
     return "+"; 
    if (s[i] == "-") 
     return "-"; 
    if (s[i] == "*") 
     return "*"; 
    if (s[i] == "/") 
     return "/"; 
    } 
} 
var input = ''; 
function calc() { 
    var dom = $("#input"); 
    input = dom.val(); 
    try { 
    switch (findOps(input)) { 
     case "+": 
     var a = input.split("+"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x + y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "-": 
     var a = input.split("-"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x - y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "*": 
     var a = input.split("*"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x * y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "/": 
     var a = input.split("/"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x/y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
    } 

    } catch (err) { 
    alert("catched¡"); 
    } 

}

источник

2016-05-17 03:44:18 Cris

Я рекомендую использовать Eval() Если пользователь вводит "5 + 6" или «(9 * 3)/5 », и вы установите это значение переменной, eval() будет анализировать и решать проблему!

источник

2017-05-10 20:00:45

Javascript Text Input Calculator

ответ

Смежные вопросы