javascript - JQuery 计算器 : can not get operators to work

Question

我正在尝试制作一个 JQuery 计算器。 但是，要让我的运算符(operator)按钮起作用 (+,-,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>

当点击任何操作函数时，当前数字应该被存储并消失，以便输入第二个值，该值也将被存储

Answer 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>