主页 / 问题 / 972450
Accepted
John
Asked:2020-04-22 14:53:43 +0000 UTC2020-04-22 14:53:43 +0000 UTC

是否可以使用闭包进行算术运算

  • 772

任务：

有一个简单的计算器，可以将两个数字相加。我不仅想做加法，还想做乘法、减法、除法，甚至取模。进入现场时

<input type="button" name="symbol" value="">

运算符字符（*、-、+、/、%）执行算术运算。我相信他们以某种方式使用了闭包。

请详细描述一下，为什么在这个例子中值得使用闭包，反之亦然是不合适的，也许还有其他选择？

input与上一个链接相比，我在源代码的下方添加了一个新链接

资源：

<div class="container">
    <input type="text" name="num1" value="">
    <input type="button" name="num2" value="="> 
    <input type="button" name="symbol" value=""> <--!добавленный ТЭГ-->

    <input type="button" name="calc" value="=">
    <span class="result"></span>
</div>

let btn = document.querySelector('input[name=calc]');
let num1 = document.querySelector('input[name=num1]');
let num2 = document.querySelector('input[name=num2]');
let result = document.querySelector('.result');
let symbol = document.querySelector('.symbol'); //новое выражение

btn.addEventListener('click', totalSum);

function totalSum() {


}
javascript

2 个回答

  1. Best Answer

    为单独的按钮重新设计：

    JsFiddle DEMO

    那里详细描述了所有步骤。虽然一般来说， eval() 建议仅在极端情况下使用......这里我喜欢这个解决方案，但你不应该把它们分散到任何地方）

    我决定不碰旧答案：

    简单的操作很容易，因为它们的 JS 表示对应于键入的字符，而“%”符号的意思是“计算除法后的余数”。

    有一个函数eval()可以接受任何字符串并将其作为代码执行。因此，您可以先将操作写成字符串，使用Sting()...

    JsFiddle DEMO

    (function(){
  const opera = document.getElementById('opera');
  const num1 = document.getElementById('num1');
  const num2 = document.getElementById('num2');
  const btn = document.getElementById('btn');
  const result = document.getElementById('result');

  btn.addEventListener('click', function(){
   //символ == означает сравнение значений. 
   //Берем значение выбранного символа и сравниваем с "%"
   if( opera.value == "%" ) {
     result.innerText = (Number(num1.value)*Number(num2.value))/100 ;
   } else {
      //Вот здесь по сути записано (число) + (символ операции) + (число)
      //Если у нас введено 7 * 5 то записанное равно строке "7*5"
      result.innerText = eval( String(num1.value + opera.value + num2.value) );
   }
  });
})();
    #opera option {font-size:30px;}
#opera,#btn,#result {font-size:30px;}
input {font-size:30px;width:200px;}
    <input type="number" id="num1">
<select id="opera">
  <option>+</option> 
  <option>-</option> 
  <option>*</option> 
  <option>/</option> 
  <option>%</option> 
</select>
<input type="number" id="num2">
<br><br>
<button id="btn">=</button>
<span id="result"></span>

    • 1

  2. 这是我想要实现的[更正]

    let btn = document.querySelector('input[name=calc]');
let symbol = document.querySelector('input[name=symbol]');
let num1 = document.querySelector('input[name=num1]');
let num2 = document.querySelector('input[name=num2]');
let result = document.querySelector('.result');

btn.addEventListener('click', addition);
symbol.addEventListener('input', writeSymbol);
num2.addEventListener("input", btnEnable);
num1.addEventListener("input", btnEnable);

function addition() {
    let a = parseInt(num1.value);
    let b= parseInt(num2.value);
    let res;

    if (symbol.value === "+"){
        res = a + b;
    }

    else if(symbol.value === "*"){

        res = a * b;
    }

    else if(symbol.value === "-"){

        res = a - b;
    }

    else{
        alert('incorrect symbol')
    }

    result.textContent = res;
    btn.disabled = true;

}

function writeSymbol(){
    this.setAttribute("value", this.value);
    btn.disabled = false;
}

function btnEnable(){
    btn.disabled = false;
}
    <input type="text" name="num1" value="">
		<input type="text" name="symbol">


		<input type="text" name="num2" value="">
		<input type="button" name="calc" value="=">
		<span class="result"></span>

    • 1

相关问题