Блог

Недавно я боролся с концепцией калькулятора с использованием JavaScript. Я много чего перепробовал, но просто не могу заставить это работать.

Калькулятор имеет три выпадающих списка: один для первого числа (0-9), один для операции и один для второго числа (также 0-9). По сути, когда вы нажимаете кнопку «Выполнить уравнение», она получает значения из выпадающих списков и предположительно суммирует все эти значения, выполняя уравнение. Вот пример, короткий и простой.

 <select id="n1">
<option value="0">0</option>
<option value="1">1</option>
</select>

<select id="op">
<option value=" ">0</option>
<option value="-">1</option>
</select>


<select id="n2">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="button" value="Perform Equation" onclick="perform"/>

<p id="printE"/>

<script>
function perform() {
var analyseN1 = document.getElementById("n1").value
var analyseOp = document.getElementById("op").value
var analyseN2 = document.getElementById("n2").value
var addUp = analyseN1 analyseOp analyseN2;
document.getElementById("printE").innerHTML= addUp;
}
</script>
  

Как вы можете видеть, я получаю значения всех выпадающих списков, «добавляю их», а затем печатаю конечный результат. Однако это не работает. Может кто-нибудь, пожалуйста, скажите мне, почему? Я, ну, не лучший в JavaScript. Я довольно молод и познакомился с языком всего пару месяцев назад. Так что да, если вы знаете ответ, было бы здорово, если бы вы могли мне сказать. Спасибо!

Здесь есть несколько проблем. Во-первых, это имеет два значения в Javascript. Для чисел это означает «плюс», как вы и предполагали. Однако для строк это означает «объединить».

Итак 1 1 = 2 , но "1" "1" = "11" .

Когда вы извлекаете значения из своих <select> элементов, они будут получены в виде строк, поэтому вам нужно проанализировать их как целые числа, используя parseInt вот так:

 var analyseN1 = parseInt(document.getElementById("n1").value);
var analyseN2 = parseInt(document.getElementById("n2").value);
  

Другая проблема заключается в том, что для построения вашего уравнения вы на самом деле создаете строку кода для запуска. Можно выполнить выполнение строки кода eval() , но это ужасно небезопасно, поэтому никто здесь не будет рекомендовать это!

Возможно, вам придется вместо этого сделать что-то вроде:

 // Get the numbers from the selects, and the operator
var analyseN1 = parseInt(document.getElementById("n1").value);
var analyseOp = document.getElementById("op").value
var analyseN2 = parseInt(document.getElementById("n2").value);

// Add or subtract the numbers, depending on the selected operator
var addUp;
if(analyseOp == " "){
  addUp = analyseN1   analyseN2;
}else{
  addup = analyseN1 - analyseN2;
}
  

Вот почему вам следует избегать использования eval() , хотя это самый прямой ответ на ваш вопрос:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21

Чтобы фактически выполнить вычисления, вам нужно немного больше кода, чем это.

То, что вы делаете прямо сейчас, — это получение значений из элементов n1 , op , и n2 . Затем вы в основном объединяете эти строки в результат.

Чтобы получить числовое значение строк n1 и n2 , вам нужно использовать parseInt :

 function perform() {
    var analyseN1 = parseInt(document.getElementById("n1").value, 10);
    var analyseOp = document.getElementById("op").value
    var analyseN2 = parseInt(document.getElementById("n2").value, 10);
  

Со страницы MDN:
parseInt() Функция анализирует строковый аргумент и возвращает целое число указанного основания или основания.

Затем, чтобы использовать правильный оператор, в зависимости от выпадающего списка, вам нужно будет сравнить analyseOp значение с a " " и "-" строкой:

     var addUp;
    if(analyseOp === ' '){
        addUp = analyseN1   analyseN2;
    }else if(analyseOp === '-'){
        addUp = analyseN1 - analyseN2;
    }

    document.getElementById("printE").innerHTML= addUp;
}