1. 首页
  2. 问题列表
  3. 向javascript计算器添加keyCode事件
提问者：小点点

向javascript计算器添加keyCode事件


当我输入数字而不是点击数字按钮时，我很难让这个计算器正常工作。 我添加了一些javascript，它将键代码作为数组，并将正确的数字添加到DisplayVal中。 它开始工作，但一旦按下运算符并将数字存储为“pending val”，当键入数字时，数字“0”将被添加到数字的开头，并返回对超过10的数字的奇数计算。 如果有人看到这个问题或有另一个工作周围的这只涉及JS，它将非常感谢。

null

var oneBtn = document.getElementById("btn1");
var twoBtn = document.getElementById("btn2");
var threeBtn = document.getElementById("btn3");
var fourBtn = document.getElementById("btn4");
var fiveBtn = document.getElementById("btn5");
var sixBtn = document.getElementById("btn6");
var sevenBtn = document.getElementById("btn7");
var eightBtn = document.getElementById("btn8");
var nineBtn = document.getElementById("btn9");
var zeroBtn = document.getElementById("btn0");

var decimalBtn = document.getElementById("btnDec");
var clearBtn = document.getElementById("btnClear");
var percentBtn = document.getElementById("btnPer");
var plusMinBtn = document.getElementById("btnPM");

var displayValElement = document.getElementById("output");

var calcNumBtns = document.getElementsByClassName("calcNum");
var calcOperators = document.getElementsByClassName("calcOp");

var displayVal = '0';
var pendingVal;
var evalStringArray = [];

var updateDisplayVal = (clickObj) => {
var btnText = clickObj.target.innerText;

  if (displayVal === '0')
    displayVal = '';

  displayVal += btnText;
  displayValElement.innerText = displayVal;
}

var performOperation = (clickObj) => {
  var operator = clickObj.target.innerText;

  switch (operator) {
  case '+':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('+');
    break;
  case '-':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('-');
    break;
  case 'x':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('*');
    break;
  case '÷':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('/');
    break;
  case '=':
    evalStringArray.push(displayVal);
    var evaluation = eval(evalStringArray.join(' '));
    displayVal = evaluation + '';
    displayValElement.innerText = displayVal;
    evalStringArray = [];
    break;
  default: 
    break;
  }
}

for (let i = 0; i < calcNumBtns.length; i++) {
  calcNumBtns[i].addEventListener('click', updateDisplayVal, false);
}

for (let i = 0; i < calcOperators.length; i++) {
  calcOperators[i].addEventListener('click', performOperation, false);
}

// Added to remove initial 0 for displayVal when typing

var keys = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57];

for (let i = 0; i < keys.length; i++) {
  if (keyCode = keys[i] && displayVal == '0') {
    displayVal = '';
  }
}

// Adds ability to type #'s to buttons

 function keyCodeOne (event) {
    if (event.which == 49 || event.keyCode == 49) {
        displayVal += 1;
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeOne, false);

function keyCodeTwo (event) {
    if (event.which == 50 || event.keyCode == 50) {
        displayVal += '2';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeTwo, false);

function keyCodeThree (event) {
    if (event.which == 51 || event.keyCode == 51) {
        displayVal += '3';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeThree, false);

function keyCodeFour (event) {
    if (event.which == 52 || event.keyCode == 52) {
        displayVal += '4';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeFour, false);

function keyCodeFive (event) {
    if (event.which == 53 || event.keyCode == 53) {
        displayVal += '5';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeFive, false);

function keyCodeSix (event) {
    if (event.which == 54 || event.keyCode == 54) {
        displayVal += '6';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeSix, false);

function keyCodeSeven (event) {
    if (event.which == 55 || event.keyCode == 55) {
        displayVal += '7';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeSeven, false);

function keyCodeEight (event) {
    if (event.which == 56 || event.keyCode == 56) {
       displayVal += '8';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeEight, false);

function keyCodeNine (event) {
    if (event.which == 57 || event.keyCode == 57) {
        displayVal += '9';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeNine, false);

function keyCodeZero (event) {
    if (event.which == 48 || event.keyCode == 48) {

        displayVal += '0';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeZero, false);
<section id="mainContainer">

  <div id="calcContainer">
  <form id="form" name="form">
    <div id="displayBox">
      <div id="output" class="textView">0</div>
    </div>
  </form>
  <table id="table" class="calcTable" cellspacing="10px">
    <tbody>
    <tr>
      <td><button id="btnClear" class="calcBtn tr1">AC</button></td>
      <td><button id="btnPM" class="calcBtn tr1">+/-</button></td>
      <td><button id="btnPer" class="calcBtn tr1">%</button></td>
      <td><button id="btnDiv" class="calcBtn calcOp tr2">&#247</button></td>
    </tr> 
    <tr>
      <td><button id="btn9" class="calcBtn calcNum">7</button></td>
      <td><button id="btn8" class="calcBtn calcNum">8</button></td>
      <td><button id="btn7" class="calcBtn calcNum">9</button></td>
      <td><button id="btnMul" class="calcBtn calcOp tr2">x</button></td>
    </tr>
    <tr>
      <td><button id="btn4" class="calcBtn calcNum">4</button></td>
      <td><button id="btn5" class="calcBtn calcNum">5</button></td>
      <td><button id="btn6" class="calcBtn calcNum">6</button></td>
      <td><button id="btnSub" class="calcBtn calcOp tr2">-</button></td>
    </tr>
    <tr>
      <td><button id="btn1" class="calcBtn calcNum">1</button></td>
      <td><button id="btn2" class="calcBtn calcNum">2</button></td>
      <td><button id="btn3" class="calcBtn calcNum">3</button></td>
      <td><button id="btnAdd" class="calcBtn calcOp tr2">+</button></td>
    </tr>
    <tr>
      <td colspan="2"><button id="btn0" class="calcBtn calcNum">0</button></td>
      <td><button id="btnDec" class="calcBtn">.</button></td>
      <td><button id="btnEq" class="calcBtn calcOp tr2">=</button></td>
    </tr>
    </tbody>
  </table>
  </div>

</section>

null


共1个答案

匿名用户

再见，尝试对每个按钮点击进行检查，以验证第一个数字是否为0，如下所示:

if(displayVal === '0') displayVal = '';

看这个例子:

null

var oneBtn = document.getElementById("btn1");
var twoBtn = document.getElementById("btn2");
var threeBtn = document.getElementById("btn3");
var fourBtn = document.getElementById("btn4");
var fiveBtn = document.getElementById("btn5");
var sixBtn = document.getElementById("btn6");
var sevenBtn = document.getElementById("btn7");
var eightBtn = document.getElementById("btn8");
var nineBtn = document.getElementById("btn9");
var zeroBtn = document.getElementById("btn0");

var decimalBtn = document.getElementById("btnDec");
var clearBtn = document.getElementById("btnClear");
var percentBtn = document.getElementById("btnPer");
var plusMinBtn = document.getElementById("btnPM");

var displayValElement = document.getElementById("output");

var calcNumBtns = document.getElementsByClassName("calcNum");
var calcOperators = document.getElementsByClassName("calcOp");

var displayVal = '0';
var pendingVal;
var evalStringArray = [];

var updateDisplayVal = (clickObj) => {
var btnText = clickObj.target.innerText;

  if (displayVal === '0')
    displayVal = '';

  displayVal += btnText;
  displayValElement.innerText = displayVal;
}

var performOperation = (clickObj) => {
  var operator = clickObj.target.innerText;

  switch (operator) {
  case '+':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('+');
    break;
  case '-':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('-');
    break;
  case 'x':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('*');
    break;
  case '÷':
    pendingVal = displayVal;
    displayVal = '0';
    displayValElement.innerText = displayVal;
    evalStringArray.push(pendingVal);
    evalStringArray.push('/');
    break;
  case '=':
    evalStringArray.push(displayVal);
    var evaluation = eval(evalStringArray.join(' '));
    displayVal = evaluation + '';
    displayValElement.innerText = displayVal;
    evalStringArray = [];
    break;
  default: 
    break;
  }
}

for (let i = 0; i < calcNumBtns.length; i++) {
  calcNumBtns[i].addEventListener('click', updateDisplayVal, false);
}

for (let i = 0; i < calcOperators.length; i++) {
  calcOperators[i].addEventListener('click', performOperation, false);
}

// Added to remove initial 0 for displayVal when typing

var keys = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57];

for (let i = 0; i < keys.length; i++) {
  if (keyCode = keys[i] && displayVal == '0') {
    displayVal = '';
  }
}

// Adds ability to type #'s to buttons

 function keyCodeOne (event) {
    if (event.which == 49 || event.keyCode == 49) {
        if(displayVal === '0') displayVal = '';
        displayVal += 1;
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeOne, false);

function keyCodeTwo (event) {
    if (event.which == 50 || event.keyCode == 50) {
        if(displayVal === '0') displayVal = '';
        displayVal += '2';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeTwo, false);

function keyCodeThree (event) {
    if (event.which == 51 || event.keyCode == 51) {
        if(displayVal === '0') displayVal = '';
        displayVal += '3';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeThree, false);

function keyCodeFour (event) {
    if (event.which == 52 || event.keyCode == 52) {
        if(displayVal === '0') displayVal = '';
        displayVal += '4';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeFour, false);

function keyCodeFive (event) {
    if (event.which == 53 || event.keyCode == 53) {
        if(displayVal === '0') displayVal = '';
        displayVal += '5';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeFive, false);

function keyCodeSix (event) {
    if (event.which == 54 || event.keyCode == 54) {
        if(displayVal === '0') displayVal = '';
        displayVal += '6';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeSix, false);

function keyCodeSeven (event) {
    if (event.which == 55 || event.keyCode == 55) {
        if(displayVal === '0') displayVal = '';
        displayVal += '7';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeSeven, false);

function keyCodeEight (event) {
    if (event.which == 56 || event.keyCode == 56) {
       if(displayVal === '0') displayVal = '';
       displayVal += '8';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeEight, false);

function keyCodeNine (event) {
    if (event.which == 57 || event.keyCode == 57) {
        if(displayVal === '0') displayVal = '';
        displayVal += '9';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeNine, false);

function keyCodeZero (event) {
    if (event.which == 48 || event.keyCode == 48) {

        displayVal += '0';
        displayValElement.innerText = displayVal;
        return false;
    }
    return true;
};

document.addEventListener("keydown", keyCodeZero, false);
<section id="mainContainer">

  <div id="calcContainer">
  <form id="form" name="form">
    <div id="displayBox">
      <div id="output" class="textView">0</div>
    </div>
  </form>
  <table id="table" class="calcTable" cellspacing="10px">
    <tbody>
    <tr>
      <td><button id="btnClear" class="calcBtn tr1">AC</button></td>
      <td><button id="btnPM" class="calcBtn tr1">+/-</button></td>
      <td><button id="btnPer" class="calcBtn tr1">%</button></td>
      <td><button id="btnDiv" class="calcBtn calcOp tr2">&#247</button></td>
    </tr> 
    <tr>
      <td><button id="btn9" class="calcBtn calcNum">7</button></td>
      <td><button id="btn8" class="calcBtn calcNum">8</button></td>
      <td><button id="btn7" class="calcBtn calcNum">9</button></td>
      <td><button id="btnMul" class="calcBtn calcOp tr2">x</button></td>
    </tr>
    <tr>
      <td><button id="btn4" class="calcBtn calcNum">4</button></td>
      <td><button id="btn5" class="calcBtn calcNum">5</button></td>
      <td><button id="btn6" class="calcBtn calcNum">6</button></td>
      <td><button id="btnSub" class="calcBtn calcOp tr2">-</button></td>
    </tr>
    <tr>
      <td><button id="btn1" class="calcBtn calcNum">1</button></td>
      <td><button id="btn2" class="calcBtn calcNum">2</button></td>
      <td><button id="btn3" class="calcBtn calcNum">3</button></td>
      <td><button id="btnAdd" class="calcBtn calcOp tr2">+</button></td>
    </tr>
    <tr>
      <td colspan="2"><button id="btn0" class="calcBtn calcNum">0</button></td>
      <td><button id="btnDec" class="calcBtn">.</button></td>
      <td><button id="btnEq" class="calcBtn calcOp tr2">=</button></td>
    </tr>
    </tbody>
  </table>
  </div>

</section>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS