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

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

我会用 Jquery:

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

  // do what you want to do with it.

});

您可以对运算符执行相同的操作。

Answer 2

只需从 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;
  }
});

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

Get multiple element values to display in text box

javascript

arrays

calculator