在JavaScript中對按鈕值執行操作

我正在嘗試用 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。（我正在先進行添加）。
任何朝著正確方向的推動都值得贊賞。謝謝！

uj5u.com熱心網友回復：

你是對的，你可以使用一個函式來完成所有的作業，但這意味著你必須用類和資料屬性來標記你的 HTML。

在本例中，我使用CSS 網格來顯示各種計算器按鈕。“等于”和“清除”按鈕有一個資料屬性來幫助函式決定要做什么操作。

// 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 按钮 计算器 手术

上一篇：具有動態變數的ForEach回圈

下一篇：輸入按鈕未居中