时间戳

首页 > 解决方案 > 我可以做些什么来混合操作？使用香草 javascript

javascript - 我可以做些什么来混合操作？使用香草 javascript

问题描述

我正在开发一个简单的计算器，它实现了求和、休息、乘法和除法。

我想在任何带有“数字”类的按钮内获取内部文本，以便稍后像数字一样使用它来通过一个进行数学运算的函数。

这些是与计算器一起使用的功能。

const add = (num1, num2) => {
  return num1 + num2;
};

const subtract = (num1, num2) => {
  return num1 - num2;
};

const multiply = (num1, num2) => {
  return num1 * num2;
};

const divide = (num1, num2) => {
  return num1 / num2;
};
 
// Our Buttons
const outPut = document.getElementById('output');
const num = document.getElementsByClassName('number');

const addBtn = document.querySelector('.addOperator');
const subtractBtn = document.querySelector('.subtractOperator');
const multiplyBtn = document.querySelector('.multiplyOperator');
const divideBtn = document.querySelector('.divideOperator');

const allClear = document.querySelector('.ac');

const equals = document.querySelector('.equals');


let plusFirsValue = '';
let secondValue = 0;
let subFirstValue = 0;
let multFirstValue = 0;
let divFirstValue = 0;

for(let i = 0; i < num.length; i++) {
  num[i].addEventListener('click', () => { 
    outPut.innerText += num[i].innerText;
    console.log(outPut.innerText);
  });
};

addBtn.addEventListener('click', () => {
  plusFirsValue = Number(outPut.innerText);
  outPut.innerText = '';
  console.log(plusFirsValue);
});
  
subtractBtn.addEventListener('click', () => {
  subFirstValue = Number(outPut.innerText);
  outPut.innerText = '';
  console.log(plusFirsValue);
});

multiplyBtn.addEventListener('click', () => {
  multFirstValue = Number(outPut.innerText);
    outPut.innerText = '';
});

divideBtn.addEventListener('click', () => {
  divFirstValue = Number(outPut.innerText);
    outPut.innerText = '';
});

equals.addEventListener('click', () => {
  secondValue = Number(outPut.innerText);
  if (plusFirsValue && secondValue) {
    outPut.innerText = add(plusFirsValue, secondValue);
    console.log(add(plusFirsValue, secondValue));
  } else if (subFirstValue && secondValue) {
    outPut.innerText = subtract(subFirstValue, secondValue);
    console.log(subtract(subFirstValue, secondValue));
  } else if (multFirstValue && secondValue) {
    outPut.innerText = multiply(multFirstValue, secondValue);
    console.log(multiply(multFirstValue, secondValue));
  } else if (divFirstValue && secondValue) {
    outPut.innerText = divide(divFirstValue, secondValue);
    console.log(divide(divFirstValue, secondValue));
  }
});

allClear.addEventListener('click', () => {
  outPut.innerText = '';
})
  <div id="calculator-grid">
    <div id="output"></div> 

    <button class="ac">AC</button>
    <button class="sun">Sun</button>
    <button class="divideOperator">÷</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="number">9</button>
    <button class="multiplyOperator">*</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="number">6</button>
    <button class="addOperator">+</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="number">3</button>
    <button class="subtractOperator">-</button>
    <button class="number">0</button>
    <button class="number">.</button>
    <button class="equals">=</button>
  </div>

我想做的一些实现是操作之间的混合，这意味着，在两个数字之间的总和之后，我想休息其他。例如 3 + 3 = 6 但在同一操作中 6 - 3 = 3。我能做些什么？

标签： javascripthtml

解决方案

请注意，在您的代码中，第一个选择器（具有“数字”类的按钮）分配的数组成员少于第二个选择器（选择所有按钮），但是在循环中您使用数字索引。

const btn = document.getElementsByTagName('button');
const inp = document.getElementById('output');
for (let i = 0; i < btn.length; ++i) {
  btn[i].addEventListener('click', () => {
  inp.innerText += btn[i].innerText;
});

添加到所有按钮的事件侦听器和 id 为“输出”的 div 的 innerText 通过单击其中一个按钮进行修改。

推荐阅读