Я пытаюсь сделать калькулятор JQuery. Однако, чтобы заставить мои операторские кнопки работать (+, -, x), мне нужно иметь возможность сохранить текущее значение, чтобы ввести другое значение, и я не уверен, как это сделать. Функция dataOperation была моей основной идеей. Но по какой-то причине я все еще могу заставить его работать должным образом

function removeNumbers() {
    $(".current-operand").html('');
}

function passInt() {
    $('.current-operand').append(parseInt($(this).html()));
}

function dataOperation() {
    $('.previous-operand').html($(this).html());
    var operation = $(".data-operation").val();
    if (operation == '+') {

        getCurrentValue();
        var result = parseFloat($(".current-operand").val()) + 'samplevalue';

    }
    if (operation == '=') {
        $(".current-operand").html(result);
    }
}



function getCurrentValue() {
    var currentValue = $(".current-operand").val();
    removeNumbers();
    return currentValue;
}

function init() {
    $(".data-number").click(passInt);
    $(".data-allclear").click(removeNumbers);
    $(".data-operation").click(dataOperation);

}

$(document).ready(init);
            *, *::before, *::after {
                box-sizing: border-box;
                font-weight: normal;
            }
            
            .calculator-grid {
                display: grid;
                justify-content: center;
                align-content: center;
                min-height: 100vh;
                grid-template-columns: repeat(4, 100px);
                grid-template-rows: minmax(120px, auto) repeat(5, 100px);
            }
            
            .span-two {
                grid-column: span 2;
            }
            
            .output {
                grid-column: 1 / -1;
                background-color: rgba(0, 0, 0, 0.75);
                display: flex;
                align-items: flex-end;
                justify-content: space-around;
                flex-direction: column;
                padding: 10px;
                word-wrap: break-word;
                word-break: break-all;
            }
            
            .output .previous-operand {
                color: rgba(255, 255, 255, 0.75);
                font-size: 1.5rem;
            }
            .output .current-operand {
                color: #fff;
                font-size: 2.5rem;
            }
            
            
            
            
            .calculator-grid > button {
                cursor: pointer;
                font-size: 2rem;
                border: 1px solid white;
                outline: none;
                background-color: lightblue;
            }
            .calculator-grid button:hover {
                filter: brightness(110%);
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator-grid">
    <div class="output">
        <div class="previous-operand"></div>
        <div class="current-operand"></div>
    </div>
    <button class="span-two data-allclear">AC</button>
    <button class="data-delete">DEL</button>
    <button class="data-operation">+</button>
    <button class="data-number">1</button>
    <button class="data-number">2</button>
    <button class="data-number">3</button>
    <button class="data-operation">*</button>
    <button class="data-number">4</button>
    <button class="data-number">5</button>
    <button class="data-number">6</button>
    <button class="data-operation">+</button>
    <button class="data-number">7</button>
    <button class="data-number">8</button>
    <button class="data-number">9</button>
    <button class="data-operation">-</button>
    <button class="data-number">.</button>
    <button class="data-number">0</button>
    <button class="span-two data-equals">=</button>
</div>

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

1
PandaPlaysAll

1 ответ

Проблема в вашем коде состоит в том, что вы не обращаетесь к полям неправильно. Вы хотели бы использовать существующий HTML-контент. Код использует .val (), поэтому вы получите значение поля ввода, но это простой текст. Так что вам нужен .html () ;. Также результат getCurrentValue не был использован

function removeNumbers() {
    $(".current-operand").html('');
}

function passInt() {
    $('.current-operand').append(parseInt($(this).html()));
}

function dataOperation(e) {
    var operation = $(this).html();
    var oldValue = getCurrentValue();
    var existingValue = $('#previous-operand').html()
    if (operation == '+') {
        console.log(existingValue);
        var result = existingValue + parseFloat($(".current-operand").html()) + operation + oldValue;
    }

    if (operation == '=') {
        $(".current-operand").html(result);
    }

    $('.previous-operand').html(existingValue + oldValue + $(this).html());
}



function getCurrentValue() {
    var currentValue = $("#current-operand").html();
    removeNumbers();
    return currentValue;
}

function init() {
    $(".data-number").click(passInt);
    $(".data-allclear").click(removeNumbers);
    $(".data-operation").click(dataOperation);

}

$(document).ready(init);
            *, *::before, *::after {
                box-sizing: border-box;
                font-weight: normal;
            }
            
            .calculator-grid {
                display: grid;
                justify-content: center;
                align-content: center;
                min-height: 100vh;
                grid-template-columns: repeat(4, 100px);
                grid-template-rows: minmax(120px, auto) repeat(5, 100px);
            }
            
            .span-two {
                grid-column: span 2;
            }
            
            .output {
                grid-column: 1 / -1;
                background-color: rgba(0, 0, 0, 0.75);
                display: flex;
                align-items: flex-end;
                justify-content: space-around;
                flex-direction: column;
                padding: 10px;
                word-wrap: break-word;
                word-break: break-all;
            }
            
            .output .previous-operand {
                color: rgba(255, 255, 255, 0.75);
                font-size: 1.5rem;
            }
            .output .current-operand {
                color: #fff;
                font-size: 2.5rem;
            }
            
            
            
            
            .calculator-grid > button {
                cursor: pointer;
                font-size: 2rem;
                border: 1px solid white;
                outline: none;
                background-color: lightblue;
            }
            .calculator-grid button:hover {
                filter: brightness(110%);
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator-grid">
    <div class="output">
        <div id="previous-operand" class="previous-operand"></div>
        <div id="current-operand" class="current-operand"></div>
    </div>
    <button class="span-two data-allclear">AC</button>
    <button class="data-delete">DEL</button>
    <button class="data-operation">+</button>
    <button class="data-number">1</button>
    <button class="data-number">2</button>
    <button class="data-number">3</button>
    <button class="data-operation">*</button>
    <button class="data-number">4</button>
    <button class="data-number">5</button>
    <button class="data-number">6</button>
    <button class="data-operation">+</button>
    <button class="data-number">7</button>
    <button class="data-number">8</button>
    <button class="data-number">9</button>
    <button class="data-operation">-</button>
    <button class="data-number">.</button>
    <button class="data-number">0</button>
    <button class="span-two data-equals">=</button>
</div>
58587573