正确使用数组方法

时间:2019-08-02 18:02:12

标签: javascript arrays

项目:不带eval功能的基本计算器。

我将单击的数字和运算符存储在一个临时数组中,然后将其推入另一个数组的不同索引中。后一个数组将包含2个数字和1个运算符以进行计算。

我不知道的是: 如何使每一个数字单击检查以查看在临时数组的最后位置是否有一个运算符? 这样,我可以将运算符推入另一个数组,然后将所有输入的数字以更高的索引输入另一个数组?

const numList = [...document.querySelectorAll(".num")];
const operatorList = [...document.querySelectorAll('.operator')];
let field = document.querySelector('#field');
let clearAll = document.querySelector('button[value*="C"]');
let switchBtn = document.querySelector('#switch');
let calcBtn = document.querySelector('#equals');
var temp = []; // temp stores values
var sumArr = []; // array containing inputs for the calculation.



// Toggle negative/positive usage
switchBtn.addEventListener('click', toggleSwitch);

// Clear all array storage and the #field input.
clearAll.addEventListener('click', clear);

// Iterate through all numList items.
numList.forEach(function(num){
  num.addEventListener('click', numClick);
});

// Iterate through all operatorList items.
operatorList.forEach(function(operator){
  operator.addEventListener('click', operatorClick);
});

// Calculate
calcBtn.addEventListener('click', calculate);



/*+++ FUNCTIONS +++*/
function updateScreen(){
    field.innerHTML = temp.join('');
}

function clear(){
    field.innerHTML = '';
    temp = [];
    sumArr = [];
}

function calculate(){

}

function toggleSwitch(){
    console.log('The switch button has been clicked!');

}

function numClick(){
    console.log('last item in temp (prev input not current)', temp[temp.length - 1]);
    /*Check for operator in temp array at the last index position --> temp[temp.length - 1]*/
    // Code here
    //
    //
    //

    temp.push(parseFloat(this.value));
    console.log('number clicked:', this.value);
    updateScreen();
}


function operatorClick(){
    sumArr.push(temp.join(''));
    temp.push(this.value);
    console.log('operator clicked:', this.value);
    updateScreen();
}


    <div id="calculator">
        <div class="row">
            <div class="screen"><span id="field"></span></div>
        </div>
        <div class="row">
            <div class="col"><button class="num" value="1">1</button></div>
            <div class="col"><button class="num" value="2">2</button></div>
            <div class="col"><button class="num" value="3">3</button></div>
            <div class="col"><button class="operator" value="+">+</button></div>
        </div>
        <div class="row">
            <div class="col"><button class="num" value="4">4</button></div>
            <div class="col"><button class="num" value="5">5</button></div>
            <div class="col"><button class="num" value="6">6</button></div>
            <div class="col"><button class="operator" value="-">-</button></div>
        </div>
        <div class="row">
            <div class="col"><button class="num" value="7">7</button></div>
            <div class="col"><button class="num" value="8">8</button></div>
            <div class="col"><button class="num" value="9">9</button></div>
            <div class="col"><button class="operator" value="*">X</button></div>
        </div>
        <div class="row">
            <div class="col"><button value=".">.</button></div>
            <div class="col"><button class="num" value="0">0</button></div>
            <div class="col"><button value="C">C</button></div>
            <div class="col"><button class="operator" value="/">/</button></div>
        </div>
        <div class="row">
            <div class="col"><button id="equals" value="=">=</button></div>
        </div>
        <div class="row">
            <div class="col"><button id="switch">Pos(+) / Neg(-)</button></div>
        </div>
    </div>

0 个答案:

没有答案