Не могу поместить value в функцию

13 января 2022, 12:20

друзья! Проблема вот в чем. Решил я написать примитивный калькулятор и все получилось, НО, в каждой функции математической операции лежит переменная которая достает value, которое вводит пользователь, если я объявляю переменную вне функции, в этом случаи функция не видит value. Подскажите, пожалуйста, как написать функцию которая это будет делать правильно.

let out = document.getElementById('out'); 
let resultPlus = document.getElementById('resultPlus'); 
let result = document.getElementById('result'); 
let resultN = document.getElementById('resultN'); 
let resultP = document.getElementById('resultP'); 
let resultPr = document.getElementById('resultPr'); 
resultPlus.onclick = function() { 
  let a = document.getElementById('a').value; 
  let b = document.getElementById('b').value; 
  out.innerHTML = (+a) + (+b); 
}; 
result.onclick = function() { 
  let a = document.getElementById('a').value; 
  let b = document.getElementById('b').value; 
  out.innerHTML = (+a) - (+b); 
}; 
resultN.onclick = function() { 
  let a = document.getElementById('a').value; 
  let b = document.getElementById('b').value; 
  out.innerHTML = (+a) * (+b); 
}; 
resultP.onclick = function() { 
  let a = document.getElementById('a').value; 
  let b = document.getElementById('b').value; 
  out.innerHTML = Math.floor(a / b); 
}; 
resultPr.onclick = function() { 
  let a = document.getElementById('a').value; 
  let b = document.getElementById('b').value; 
  out.innerHTML = a * (b / 100); 
};

<div class="calc"> 
 
<input type="number" id="a" placeholder = "Insert the number"> 
 
<input type="number" id="b" placeholder = "Insert the number"> 
<div class="buttons"> 
<button id="resultPlus">+</button> 
<button id="result">-</button> 
<button id="resultN">*</button> 
<button id="resultP">/</button> 
<button id="resultPr">%</button> 
</div> 
<p id="out">0</p> 
 
</div>

Answer 1

let out = document.getElementById('out'); 
let resultPlus = document.getElementById('resultPlus'); 
let result = document.getElementById('result'); 
let resultN = document.getElementById('resultN'); 
let resultP = document.getElementById('resultP'); 
let resultPr = document.getElementById('resultPr'); 
let a, b; 
 
function assignValues() { 
  a = +document.getElementById('a').value; 
  b = +document.getElementById('b').value; 
} 
resultPlus.addEventListener("click", assignValues); 
result.addEventListener("click", assignValues); 
resultN.addEventListener("click", assignValues); 
resultP.addEventListener("click", assignValues); 
resultPr.addEventListener("click", assignValues); 
 
resultPlus.addEventListener("click", function() { 
  out.innerHTML = a + b; 
}); 
result.addEventListener("click", function() { 
  out.innerHTML = a - b; 
}); 
resultN.addEventListener("click", function() { 
  out.innerHTML = a * b; 
}); 
resultP.addEventListener("click", function() { 
  out.innerHTML = Math.floor(a / b); 
}); 
resultPr.addEventListener("click", function() { 
  out.innerHTML = a * (b / 100); 
});

<div class="calc"> 
  <input type="number" id="a" placeholder="Insert the number"> 
  <input type="number" id="b" placeholder="Insert the number"> 
 
  <div class="buttons"> 
    <button id="resultPlus">+</button> 
    <button id="result">-</button> 
    <button id="resultN">*</button> 
    <button id="resultP">/</button> 
    <button id="resultPr">%</button> 
  </div> 
  <p id="out">0</p> 
</div>