Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   И снова калькулятор ))) (https://javascript.ru/forum/events/60908-i-snova-kalkulyator.html)

hbsv 03.02.2016 01:42
Пока выходит так: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
</head>
<link rel="stylesheet" type="text/css" href="main.css">
<body>


<from id="calculator">
    <table>
        <tr>
            <td>
                <div align="center">

                    <input id="screen" type="text" value="" size="16" class="display" readonly="readonly" />
                </div>
            </td>
        </tr>

<tr>
    <td class="buttons">
        <div align="center">

<input id="btn_1" type="button" value="1" onclick="addInput(1)"/>
<input id="btn_2" type="button" value="2" onclick="addInput(2)"/>
<input id="btn_3" type="button" value="3" onclick="addInput(3)" />
<input id="add" type="button" value="+" class="operator" onclick="add()" />
        </div>
        <div align="center">
<input id="btn_4" type="button" value="4" onclick="addInput(4)" />
<input id="btn_5" type="button" value="5" onclick="addInput(5)" />
<input id="btn_6" type="button" value="6" onclick="addInput(6)" />
<input id="sub" type="button" value=" - " onclick="sub()" class="operator" />
        </div>
<input id="btn_7" type="button" value="7" onclick="addInput(7)" />
<input id="btn_8" type="button" value="8" onclick="addInput(8)" />
<input id="btn_9" type="button" value="9" onclick="addInput(9)" />
<input id="mult" type="button" value=" * " onclick="mult()" class="operator" />
        <div align="center">
<input id="clr" type="button" value=" c " onclick="clr()" class="clear" />
<input id="btn_0" type="button" value="0" onclick="addInput(0)" />
<input id="calculate" type="button" value="  =  " onclick="calculate()" class="eval" />
<input id="div" type="button" value=" / " onclick="div()" class="operator" />


        </div>
            </td>
        </tr>
    </table>
</from>


</body>

<script type="text/javascript" language="javascript" src="main.js"></script>

</html>


и js

"use strict";

var a,b,c;
var action = "";



function getValue(value) {
    var res = document.getElementById(value).value - '';
    if (!isNaN(res))
        return res;
}

function addInput(val) {
    document.getElementById("screen").value = (document.getElementById("screen").value + val)-"";
}


function add () {
    a = getValue("screen");
    document.getElementById("screen").value = "";
    action = "+";
}

function sub() {
    a = getValue("screen");
    document.getElementById("screen").value = "";
    action = "-";
}

function mult() {
    a = getValue("screen");
    document.getElementById("screen").value = "";
    action = "*";
}

function div() {
    a = getValue("screen");
    document.getElementById("screen").value = "";
    action = "/";
}

function clr() {
    document.getElementById("screen").value = "";
}


function calculate() {
    b = getValue("screen");
    switch(action) {
        case "+":
            c = a + b;
            break;
        case "-":
            c = a - b;
            break;
        case "*":
            c = a * b;
            break;
        case "/":
            if (b == 0) {
                alert('Division durch Null kann nicht sein!');
            }
            else {
                c = a / b;
            }
            break;
    }
    document.getElementById("screen").value = c;
}

Dilettante_Pro 03.02.2016 13:45
hbsv,
Почему вы не делаете работающих примеров?
Например, такой:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <script type="text/javascript">
        "use strict";
        var a, b, c;
        var action = "";

        function getValue(value) {
            var res = parseInt(document.getElementById(value).value);
            if (res == res)
                return res;
        }

        function addInput(val) {
            document.getElementById("screen").value = (document.getElementById("screen").value + val);
        }

        function add() {
            a = getValue("screen");
            document.getElementById("screen").value = "";
            action = "+";
        }

        function sub() {
            a = getValue("screen");
            document.getElementById("screen").value = "";
            action = "-";
        }

        function mult() {
            a = getValue("screen");
            document.getElementById("screen").value = "";
            action = "*";
        }

        function div() {
            a = getValue("screen");
            document.getElementById("screen").value = "";
            action = "/";
        }

        function clr() {
            document.getElementById("screen").value = "";
        }

        function calculate() {
            b = getValue("screen");
            switch (action) {
                case "+":
                    c = a + b;
                    break;
                case "-":
                    c = a - b;
                    break;
                case "*":
                    c = a * b;
                    break;
                case "/":
                    if (b == 0) {
                        alert('Division durch Null kann nicht sein!');
                    }
                    else {
                        c = a / b;
                    }
                    break;
            }
            document.getElementById("screen").value = c;
        }    
    </script>
</head>
<body>
    <table>
        <tr>
            <td>
                <div align="center">
                    <input id="screen" type="text" value="" size="16" class="display" readonly="readonly" />
                </div>
            </td>
        </tr>
        <tr>
            <td class="buttons">
                <div align="center">
                    <input id="btn_1" type="button" value="1" onclick="addInput(this.value)" />
                    <input id="btn_2" type="button" value="2" onclick="addInput(2)" />
                    <input id="btn_3" type="button" value="3" onclick="addInput(3)" />
                    <input id="add" type="button" value="+" class="operator" onclick="add()" />
                </div>
                <div align="center">
                    <input id="btn_4" type="button" value="4" onclick="addInput(4)" />
                    <input id="btn_5" type="button" value="5" onclick="addInput(5)" />
                    <input id="btn_6" type="button" value="6" onclick="addInput(6)" />
                    <input id="sub" type="button" value=" - " onclick="sub()" class="operator" />
                </div>
                <input id="btn_7" type="button" value="7" onclick="addInput(7)" />
                <input id="btn_8" type="button" value="8" onclick="addInput(8)" />
                <input id="btn_9" type="button" value="9" onclick="addInput(9)" />
                <input id="mult" type="button" value=" * " onclick="mult()" class="operator" />
                <div align="center">
                    <input id="clr" type="button" value=" c " onclick="clr()" class="clear" />
                    <input id="btn_0" type="button" value="0" onclick="addInput(0)" />
                    <input id="calculate" type="button" value="  =  " onclick="calculate()" class="eval" />
                    <input id="div" type="button" value=" / " onclick="div()" class="operator" />
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Как говорится, найди семь отличий (хотя, может, и не семь)

hbsv 03.02.2016 23:20
Сорри не знал как сделать работающий код))

Как работает эта функция, в чем ее смысл? 

function getValue(value){
    var res = parseInt(document.getElementById(value).value);
    if  (res == res)
    return res;


По поводу нуля и минуса, я вот что имел ввиду, сейчас вставлю работающий код, сделайте любое вычитание и Вы меня поймете))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
</head>
<link rel="stylesheet" type="text/css" href="main.css">
<body>


<from id="calculator">
    <table>
        <tr>
            <td>
                <div align="center">

                    <input id="screen"  type="text" value="" size="16" class="display" readonly="readonly" />
                </div>
            </td>
        </tr>

<tr>
    <td class="buttons">
        <div align="center">

<input type="button" value="1" onclick="addInput(1)"/>
<input type="button" value="2" onclick="addInput(2)"/>
<input type="button" value="3" onclick="addInput(3)" />
<input type="button" value="+" class="operator" onclick="add()" />
        </div>
        <div align="center">
<input type="button" value="4" onclick="addInput(4)" />
<input type="button" value="5" onclick="addInput(5)" />
<input type="button" value="6" onclick="addInput(6)" />
<input type="button" value=" - " onclick="sub()" class="operator" />
        </div>
<input type="button" value="7" onclick="addInput(7)" />
<input type="button" value="8" onclick="addInput(8)" />
<input type="button" value="9" onclick="addInput(9)" />
<input type="button" value=" * " onclick="mult()" class="operator" />
        <div align="center">
<input type="button" value=" c " onclick="clr()" class="clear" />
<input type="button" value="0" onclick="addInput(0)" />
<input type="button" value="  =  " onclick="calculate()" class="eval" />
<input type="button" value=" / " onclick="div()" class="operator" />


        </div>
            </td>
        </tr>
    </table>
</from>


</body>

<script>



"use strict";

var a,b,c;
var operator;

function getValue(value){
    var res = parseInt(document.getElementById(value).value);
    if  (res == res)
    return res;
}

//function getValue(value) {
//    var res = document.getElementById(value).value - "";
//    if (!isNaN(res))
//        return res;
//}


function addInput(val) {
    document.getElementById("screen").value = document.getElementById("screen").value + val;
}


function add () {
    a = getValue("screen");
    document.getElementById("screen").value = "+";
    operator = "+";
}

function sub() {
    a = getValue("screen");
    document.getElementById("screen").value = "-";
    operator = "-";
}

function mult() {
    a = getValue("screen");
    document.getElementById("screen").value = "*";
    operator = "*";
}

function div() {
    a = getValue("screen");
    document.getElementById("screen").value = "/";
    operator = "/";
}

function clr() {
    document.getElementById("screen").value = "";
}


function calculate() {
    b = getValue("screen");
    switch(operator) {
        case "+":
            c = a + b;
            break;
        case "-":
            c = a - b;
            break;
        case "*":
            c = a * b;
            break;
        case "/":
            if (b == 0) {
                alert('Division durch Null kann nicht sein!');
            }
            else {
                c = a / b;
            }
            break;
    }
    document.getElementById("screen").value = c;
}
</script>
</html>


Я хочу, чтобы в промежуточном значении, отображался оператор, если я так делаю как в примере выше, то получается косяк с минусом.
Можно ли как то этот минус на минус исправить? или уже ничего не поделаешь?

Dilettante_Pro 04.02.2016 14:12
Вот на работающем примере сразу стали понятны ваши проблемы.
Нельзя смешивать в одном input значения и операции, т.к. в результате происходит задвоение операторов. Их, конечно, легко отфильтровать при вводе данных из input, но возникает другая проблема: минус может быть как оператором, так и частью значения, например, как результат вычисления 1-2=-1.
Поэтому операторы лучше показывать в другом input. При этом бонус - появляется возможность вести полный протокол
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
</head>

<body>
    <table>
        <tr>
            <td>
               <input id="action"  type="text" value="" size="16" class="display" readonly="readonly" />
            </td>
            <td>
                    <input id="screen"  type="text" value="" size="16" class="display" readonly="readonly" />
            </td>
        </tr>
        </table>
        <table>
        <tr>
            <td><input type="button" value="1" onclick="addInput(1)"/></td>
            <td><input type="button" value="2" onclick="addInput(2)"/></td>
            <td><input type="button" value="3" onclick="addInput(3)" /></td>
            <td><input type="button" value="+" class="operator" onclick="add()" /></td>
        </tr>
        <tr>
            <td><input type="button" value="4" onclick="addInput(4)" /></td>
            <td><input type="button" value="5" onclick="addInput(5)" /></td>
            <td><input type="button" value="6" onclick="addInput(6)" /></td>
            <td><input type="button" value=" - " onclick="sub()" class="operator" /></td>
        </tr>
        <tr>
            <td><input type="button" value="7" onclick="addInput(7)" /></td>
            <td><input type="button" value="8" onclick="addInput(8)" /></td>
            <td><input type="button" value="9" onclick="addInput(9)" /></td>
            <td><input type="button" value=" * " onclick="mult()" class="operator" /></td>
        </tr>
        <tr>
            <td><input type="button" value=" c " onclick="clr()" class="clear" /></td>
            <td><input type="button" value="0" onclick="addInput(0)" /></td>
            <td><input type="button" value=" = " onclick="calculate()" class="eval" /></td>
            <td><input type="button" value=" / " onclick="div()" class="operator" /></td></td>
        </tr>
    </table>
</body>
<script>
    "use strict";

    var a, b, c;
    var operator;

    function getValue(value) {
        var res = parseInt(document.getElementById(value).value);
        if (res == res)
            return res;
    }

 
    function addInput(val) {
        document.getElementById("screen").value = document.getElementById("screen").value + val;
        document.getElementById("action").value = document.getElementById("action").value + val;
    }

    function add() {
        a = getValue("screen");
        document.getElementById("action").value = document.getElementById("action").value + "+";
        document.getElementById("screen").value = "";
        operator = "+";
    }

    function sub() {
        a = getValue("screen");
        document.getElementById("action").value = document.getElementById("action").value + "-";
        document.getElementById("screen").value = "";
        operator = "-";
    }

    function mult() {
        a = getValue("screen");
        document.getElementById("action").value = document.getElementById("action").value + "*";
        document.getElementById("screen").value = "";
        operator = "*";
    }

    function div() {
        a = getValue("screen");
        document.getElementById("action").value = document.getElementById("action").value + "/";
        document.getElementById("screen").value = "";
        operator = "/";
    }

    function clr() {
        document.getElementById("action").value = "";
        document.getElementById("screen").value = "";
    }

    function calculate() {
         b = getValue("screen");
        switch (operator) {
            case "+":
                c = a + b;
                break;
            case "-":
                c = a - b;
                break;
            case "*":
                c = a * b;
                break;
            case "/":
                if (b == 0) {
                    alert('Division durch Null kann nicht sein!');
                }
                else {
                    c = a / b;
                }
                break;
        }
        document.getElementById("screen").value = c;
        document.getElementById("action").value = document.getElementById("action").value + "=" + c;
    }
</script>
</html>

hbsv 04.02.2016 19:30
Я понял, спасибо большое. Либо так либо так)

А в чем же суть, этой функции? Чем она отличается от логики !isNan?

function getValue(value){
    var res = parseInt(document.getElementById(value).value);
    if  (res == res)
    return res;
}

Dilettante_Pro 04.02.2016 20:32
Функция isNaN не всегда дает правильный результат. Если интересно - погуглите. Зато NaN не равно NaN всегда

feniks81 06.02.2016 07:07
А так считать?
 
А так считать не пробовали?

34+5/3*6= ???? Добавьте правила и логику. Будет идеально.
Сперва умножение, деление, потом уже сложение. Не?

Dilettante_Pro 06.02.2016 08:32
feniks81,
Прочитайте всю тему, особенно про польскую запись. Попробуйте ваш пример там. И потом, это идеи, наброски, а не завершенная работа

Dilettante_Pro 06.02.2016 13:09
Цитата:
Сообщение от hbsv (Сообщение 406363)
Я понял, спасибо большое. Либо так либо так)
Не обязательно. Можно совсем отказаться от input screen, благо ввод не с клавиатуры и хранить вводимые данные в простой переменной


Часовой пояс GMT +3, время: 19:14.
Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице