对 JavaScript 中的按钮值执行操作

Question

我正在尝试用 JS 制作一个计算器，我正在寻找对按钮值进行加减乘除的方法。我已经创建了一个显示按钮的函数，但现在我意识到这可能不是必需的，我可能只需要一个显示和执行操作的函数。

HTML代码：

        <div class="numbers">
            <button value="1" onclick="displayButtons(this)">1</button>
            <button value="2" onclick="displayButtons(this)">2</button>
            <button value="3" onclick="displayButtons(this)">3</button>
            <button value="4" onclick="displayButtons(this)">4</button> 
            <button value="=" id="calculate" onclick="performOperations(this)">=</button>
            **etc.**
        <div class="operations">
            <button value="+" onclick="displayButtons(this)" style="width: 2rem; top: 5rem;">+</button>
            <button value="-" onclick="displayButtons(this)" style="left: -6rem; top: 5rem;">-</button>
            **etc.**

JS代码：


function displayButtons(button) {
    outputDiv.innerHTML += button.value
}

function performOperations(button) {

    var val = parseFloat(button.getAttribute("value"));
    var total = parseFloat(document.getElementById('output').getAttribute("value"));

    document.getElementById('output').innerHTML = total + val;
}

这是我尝试添加按钮值的尝试，我在“=”符号上调用了 performOperations，该符号当前显示 NaN onclick。（我先做加法）。
任何朝着正确方向的推动都是值得赞赏的。谢谢！

Answer 1

你是对的，你可以使用一个函数来完成所有的工作但是这意味着你必须用[=42=标记你的HTML ] 和 data-attributes.

在这个例子中，我使用 CSS grid to display the various calculator buttons. The "equals" and "clear" buttons have a data attribute 来帮助函数决定要执行的操作。

// Cache our elements and add an event listener
// to the button container. `handleClick` returns a
// new function that is called when the listener is fired
const output = document.querySelector('.output');
const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick(), false);

function handleClick() {

  // Initialise the sum
  const sum = [];

  // Return the function that will be called
  // when a click event occurs
  return function(e) {

    // Because we're using event delegation (details
    // below) we need to check that the element that
    // was clicked was a button
    if (e.target.matches('.button')) {

      // Destructure the type from the dataset, and
      // the text content
      const { dataset: { type }, textContent } = e.target;

      // `switch` on the type
      switch (type) {

        // If it's equals evaluate the elements in
        // the array, and output it
        case 'equals': {
          output.textContent = eval(sum.join(''));
          break;
        }
        
        // Clear empties the array, and clears
        // the output
        case 'clear': {
          sum.length = 0;
          output.textContent = '';
          break;
        }
        
        // Otherwise add the textContent to
        // the array, and update the output
        default: {
          sum.push(textContent);
          output.textContent = sum.join(' ');
          break;
        }
      }
    }

  }

}

.container{width:175px;}
.buttons {display: grid; grid-template-columns: repeat(4, 40px);grid-gap:0.3em;}
.button {display:flex;justify-content:center;align-items:center;background-color: #efefef; border: 1px solid #565656;padding: 0.5em;}
.button:not(.void):hover {background-color: #dfdfdf; cursor:pointer;}
.output {height: 20px; padding: 0.5em 0.2em;font-size: 1.2em;border:1px solid #565656;margin-bottom: 0.2em;}

<div class="container">
  <div class="output"></div>
  <div class="buttons">
    <div class="button">7</div>
    <div class="button">8</div>
    <div class="button">9</div>
    <div class="button">*</div>
    <div class="button">4</div>
    <div class="button">5</div>
    <div class="button">6</div>
    <div class="button">/</div>
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">-</div>
    <div class="button">0</div>
    <div data-type="clear" class="button">C</div>
    <div data-type="equals" class="button">=</div>
    <div class="button">+</div>
  </div>
</div>

其他文档

对 JavaScript 中的按钮值执行操作

Perform operations on button values in JavaScript

javascript

calculator

operation

button