Question

我无法在文本框（计算器屏幕）内显示每个数字和运算符的值。我认为我可能需要以某种方式迭代我的val变量，因为我只得到第一个按钮的值（“1”）。我已经尝试使用for循环，它只是破坏了我的代码，并尝试使用document.getElementsByClassName [0]定义我的btns变量，因此val也将迭代所有的值，但我没有得到任何进一步。

Code

var btns = document.getElementById("keys");
var val = btns.dataset.value;
var box = document.getElementById("display");

function addToScreen(x) {
  box.value += x;
}

document.body.addEventListener('click', function(e) {
  switch (e.target.dataset.value) {
    case '1':
      console.log('you hit button one');
      addToScreen(val);
      break;
      
    case '2':
      console.log('you hit button two');
      addToScreen(val);
      break;
      
    case '3':
      console.log('you hit button three');
      addToScreen(val);
      break;
      
     case '4':
      console.log('you hit button four');
      addToScreen(val);
      break;
     
     case '5':
      console.log('you hit button five');
      addToScreen(val);
      break;
      
     case '6':
      console.log('you hit button six');
      addToScreen(val);
      break;
      
     case '7':
      console.log('you hit button seven');
      addToScreen(val);
      break;
      
     case '8':
      console.log('you hit button eight');
      addToScreen(val);
      break;
      
     case '9':
      console.log('you hit button nine');
      addToScreen(val);
      break;
      
      case '0':
      addToScreen(val);
      console.log('you hit button zero');
      break;
  }
});

#calculator {
  width: 250px;
}

#display {
  width: 200px;
  height: 50px;
  border-radius: 5px;
  font-size: 45px;
  float: left;
  text-align: right;
}

.numbers, .operators {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background-color: orange;
  border: none;
  padding: 10px;
  margin: 10px;
  font-size: 30px;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="calculator">
    <input type="text" id="display"></input>
    <button class="numbers" id="keys" data-value="1">1</button>
    <button class="numbers" id="keys" data-value="2">2</button>
    <button class="numbers" id="keys" data-value="3">3</button>
    <button class="numbers" id="keys" data-value="4">4</button>
    <button class="numbers" id="keys" data-value="5">5</button>
    <button class="numbers" id="keys" data-value="6">6</button>
    <button class="numbers" id="keys" data-value="7">7</button>
    <button class="numbers" id="keys" data-value="8">8</button>
    <button class="numbers" id="keys" data-value="9">9</button>
    <button class="numbers" id="keys" data-value="0">0</button>
    <button class="operators" id="plus" data-value="+">+</button>
    <button class="operators" id="keys" data-value="-">-</button>
    <button class="operators" id="keys" data-value="*">*</button>
    <button class="operators" id="keys" data-value="/">/</button>
    <button class="operators" id="keys" data-value="=">=</button>
    <button class="operators" id="keys" data-value="ce">CE</button>
  </div>
</body>
</html>

Answer 1

从var val = e.target.dataset.value中取出一个val变量;

document.body.addEventListener('click', function(e) {

  var val = e.target.dataset.value; 
  switch (e.target.dataset.value) {      
    case '1':
      console.log('you hit button one');
      addToScreen(val);
      break;

    case '2':
      console.log('you hit button two');
      addToScreen(val);
      break;

    case '3':
      console.log('you hit button three');
      addToScreen(val);
      break;

     case '4':
      console.log('you hit button four');
      addToScreen(val);
      break;

     case '5':
      console.log('you hit button five');
      addToScreen(val);
      break;

     case '6':
      console.log('you hit button six');
      addToScreen(val);
      break;

     case '7':
      console.log('you hit button seven');
      addToScreen(val);
      break;

     case '8':
      console.log('you hit button eight');
      addToScreen(val);
      break;

     case '9':
      console.log('you hit button nine');
      addToScreen(val);
      break;

      case '0':
      addToScreen(val);
      console.log('you hit button zero');
      break;
  }
});

Answer 2

我会用Jquery做到这一点：

$(document).on('click', '.numbers', function() {
  var data_value = $(this).attr('data-value');

  // do what you want to do with it.

});

您可以为运营商做同样的事情。

获取要在文本框中显示的多个元素值

2 个答案: