Почему мой калькулятор позволяет мне выполнять только один тип операции - PullRequest
Новая
       8

Почему мой калькулятор позволяет мне выполнять только один тип операции

0 голосов
/ 27 марта 2020

Я создаю простой калькулятор, но по тем или иным причинам работает только операция вычитания. Каждый раз, когда я пытаюсь выполнить другую операцию, она просто вычитает. Нет, в консоли не отображаются сообщения об ошибках при выполнении других операций (например, mul, add и div). 

<body>

    <div class="container">

        <!--First operand-->
        <input type="text" class="operand" id="operand1" placeholder="First Input">

        <!--Operation section-->
        <select id="operator">
            <option value="add" id="add">+</option>
            <option value="sub" id="sub">-</option>
            <option value="add" id="mul">*</option>
            <option value="add" id="div">/</option>
        </select>

        <!--Second operand-->
        <input type="text" class="operand" id="operand2" placeholder="Second Input">

        <button type="submit" id="button">Submit</button>

        <div class="results" id="results">20</div>

    </div>


    <script src="calc.js"></script>

</body>

//Retrieved html elements
var opOne = document.getElementById("operand1");
var opTwo = document.getElementById("operand2");

//operators
var add = document.getElementById("add");
var sub = document.getElementById("sub");
var mul = document.getElementById("mul");
var div = document.getElementById("div");

//Result field
var result = document.getElementById("results");

//Button
var button = document.getElementById("button");


//When button is clicked
button.addEventListener("click", () => {

    if(sub) {
            result.textContent = Number(opOne.value) - Number(opTwo.value);
                console.log("Subtraction works");
    }  else if(add) {
            result.textContent = Number(opOne.value) + Number(opTwo.value);
                console.log("Additon works");
    }  else if(mul) {
            result.textContent = Number(opOne.value) * Number(opTwo.value);
                console.log("Multiplication works")
    }   else if(div) {
            result.textContent = Number(opOne.value) / Number(opTwo.value);
                console.log("Divison works")
    }
});

Ответы [ 4 ]

1 голос
/ 27 марта 2020

Не видя ваш полный код (включая HTML), трудно дать полный ответ. Но я могу дать вам понять, что происходит не так.

Javascript - это Truthy / Falsy язык. Значение того, что не является явно ложным, оценивается как истинное.

Следовательно, if(sub) всегда оценивается как true, потому что sub это просто элемент с идентификатором "sub", а не значением элемента (которое это то, что, как я полагаю, вы хотите, но опять же, без полного кода, это трудно узнать).

ОБНОВЛЕНИЕ:

Вам нужно будет выполнить оператор if со значением вашего operator элемент. В прослушивателе событий выполните следующие действия: 

    var op = document.getElementById("operator").value;
    switch(op){
        case "sub":
            result.textContent = Number(opOne.value) - Number(opTwo.value);
            console.log("Subtraction works");
            break;
        case "add":
            result.textContent = Number(opOne.value) + Number(opTwo.value);
            console.log("Additon works");
            break;
        case "mul":
            result.textContent = Number(opOne.value) * Number(opTwo.value);
            console.log("Multiplication works");
            break;
        case "div":
            result.textContent = Number(opOne.value) / Number(opTwo.value);
            console.log("Divison works")
            break;
    }

Обратите внимание, что вам необходимо изменить значение параметров умножения и деления, чтобы точно отразить их операторы (в настоящее время оба имеют значение «add»).

Отказ от ответственности: я в настоящее время на работе, и у меня нет возможности проверить этот код, но он должен указать вам правильное направление для того, что вам нужно сделать.

0 голосов
/ 27 марта 2020

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

<!--Operation section-->
<select id="operator">
    <option value="add">+</option> //======> fix the values to be with respect to the sign selected
    <option value="sub">-</option> 
    <option value="mul">*</option> 
    <option value="div">/</option> 
</select>

Как только это будет сделано, мы добавим go в скрипт и выберем поле выбора внутри события прослушивателя кликов, чтобы получить последнее значение, выбранное при клике. 

button.addEventListener("click", () => {
  //operators
  let operator = document.querySelector("#operator");

QuerySelector - рекомендуемый способ получения элементов html вместо getElement. После этого мы просто проверим выбранное значение с .value на элементе и сопоставим его с add для добавления и т. Д.

Полный код: 

//Retrieved html elements
var opOne = document.querySelector("#operand1");
var opTwo = document.querySelector("#operand2");

//Result field
var result = document.querySelector("#results");

//Button
var button = document.querySelector("#button");


//When button is clicked
button.addEventListener("click", () => {
    //operators
    let operator = document.querySelector("#operator");

    if(operator.value ==="sub") {
            result.textContent = Number(opOne.value) - Number(opTwo.value);
                console.log("Subtraction works");
    }  else if(operator.value ==="add") {
            result.textContent = Number(opOne.value) + Number(opTwo.value);
                console.log("Additon works");
    }  else if(operator.value ==="mul") {
            result.textContent = Number(opOne.value) * Number(opTwo.value);
                console.log("Multiplication works")
    }   else if(operator.value ==="div") {
            result.textContent = Number(opOne.value) / Number(opTwo.value);
                console.log("Divison works")
    }
});
<!DOCTYPE html>
<html>
<body>

    <div class="container">

        <!--First operand-->
        <input type="text" class="operand" id="operand1" placeholder="First Input">

        <!--Operation section-->
        <select id="operator">
            <option value="add" id="add">+</option>
            <option value="sub" id="sub">-</option>
            <option value="mul" id="mul">*</option>
            <option value="div" id="div">/</option>
        </select>

        <!--Second operand-->
        <input type="text"  id="operand2" placeholder="Second Input">

        <button type="submit" id="button">Submit</button>

        <div class="results" id="results">20</div>

    </div>
</body>
</html>
0 голосов
/ 27 марта 2020

Проверьте сейчас 

//Retrieved html elements
        var opOne = document.getElementById("operand1");
        var opTwo = document.getElementById("operand2");

        //operators



        //Result field
        var result = document.getElementById("results");

        //Button
        var button = document.getElementById("button");


        //When button is clicked
        button.addEventListener("click", () => {
            var e = document.getElementById("operator");
            var strUser = e.options[e.selectedIndex].value;
            console.log(strUser);
            if (strUser === 'sub') {
                result.textContent = Number(opOne.value) - Number(opTwo.value);
                console.log("Subtraction works");
            } else if (strUser === 'add') {
                result.textContent = Number(opOne.value) + Number(opTwo.value);
                console.log("Additon works");
            } else if (strUser === 'mul') {
                result.textContent = Number(opOne.value) * Number(opTwo.value);
                console.log("Multiplication works")
            } else if (strUser === 'div') {
                result.textContent = Number(opOne.value) / Number(opTwo.value);
                console.log("Divison works")
            }
        });
 <!--First operand-->
        <input type="text" class="operand" id="operand1" placeholder="First Input">

        <!--Operation section-->
        <select id="operator">
            <option value="add" id="add">+</option>
            <option value="sub" id="sub">-</option>
            <option value="mul" id="mul">*</option>
            <option value="div" id="div">/</option>
        </select>

        <!--Second operand-->
        <input type="text" class="operand" id="operand2" placeholder="Second Input">

        <button type="submit" id="button">Submit</button>

        <div class="results" id="results">00</div>
0 голосов
/ 27 марта 2020

по вашему, если в выражении elses вы в основном проверяете, существуют ли sub, add, div, mul и все они возвращают true, вы всегда останетесь на первом, который является sub.

попробуйте создать какой-нибудь другой переменная для сохранения выбранной операции. а затем выполните if в этой переменной, чтобы проверить ее значение, если это sub, add, div или mul.

...