Программа выдает undefined

Question

let buttonPlus = document.getElementById("buttonPlus");
let buttonMinus = document.getElementById("buttonMinus");
let buttonMultiplay = document.getElementById("buttonMultiplay");
let buttonDevide = document.getElementById("buttonDevide");

let input1 = document.getElementById("number1");
let input2 = document.getElementById("number2");
var result

function makeOperation(operationCode) {

  let number1 = Number(input1.value);
  let number2 = Number(input2.value);

  if (operationCode === '+') {
    result = number1 + number2;
  } else if (operationCode === "-") {
    result = number1 - number2;
  } else if (operationCode === "*") {
    result = number1 * number2;
  } else if (operationCode === "/") {
    result = number1 / number2;
  }
  debugger
  window.alert(result);
}

// function onButtonPlusClick() {
//     makeOperation("+");
// }

function onOperationButtonClick(eventObject) {
  let clickedElement = eventObject.currentTarget;
  let operation = clickedElement.innerHTML;
  makeOperation(operation);
}

buttonPlus.addEventListener("click", onOperationButtonClick);
buttonMinus.addEventListener("click", onOperationButtonClick);
buttonMultiplay.addEventListener("click", onOperationButtonClick);
buttonDevide.addEventListener("click", onOperationButtonClick);

<div class="button-block">
  <button id="buttonPlus">+</button>
  <button id="buttonMinus">-</button>
  <button id="buttonMultiplay">*</button>
  <button id="buttonDevide">/</button>
</div>
<hr>
<div class="number-inputs-block">
  <div class="number-block">
    <label>
        Nuber 1
      </label>
    <input id="number1">
  </div>
  <div class="number-block">
    <label>
        Numer 2
      </label>
    <input id="number2">
  </div>
</div>

Когда начинаю использовать currentTarget "alert" не находит ничего. Не могу понять почему.

Answer 1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>zalupko</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="button-block">
      <button id="buttonPlus">
      +
      </button>
      <button id="buttonMinus">
      -
      </button>
      <button id="buttonMultiplay">
      *
      </button>
      <button id="buttonDevide">
      /
      </button>
    </div>
    <div class="">
      <hr>
    </div>
    <div class="number-inputs-block">
      <div class="number-block">
      <label>
        Nuber 1
      </label>
      <input id="number1">
      </div>
    <div class="number-block">
      <label>
        Numer 2
      </label>
      <input id="number2">
    </div>
    </div>
</div>
<script>
let buttonPlus = document.getElementById("buttonPlus");
let buttonMinus = document.getElementById("buttonMinus");
let buttonMultiplay = document.getElementById("buttonMultiplay");
let buttonDevide = document.getElementById("buttonDevide");

let input1 = document.getElementById("number1");
let input2 = document.getElementById("number2");
var result;

function makeOperation(operationCode) {
    let number1 = Number(input1.value);
    let number2 = Number(input2.value);
    
     if (operationCode === '+') {
        result = number1 + number2;
    } else if (operationCode === "-") {
        result = number1 - number2;
    } else if ( operationCode === "*") {
        result = number1 * number2;
    } else if (operationCode === "/") {
        result = number1 / number2;
    }
    console.log(result);
}

function onOperationButtonClick(eventObject) {
    let clickedElement = eventObject.currentTarget;
    let operation = clickedElement.innerHTML.trim();
    makeOperation(operation);
}

buttonPlus.addEventListener("click", onOperationButtonClick);
buttonMinus.addEventListener("click", onOperationButtonClick);
buttonMultiplay.addEventListener("click", onOperationButtonClick);
buttonDevide.addEventListener("click", onOperationButtonClick);
</script>
</body>
</html>

БЛОГ НА HUSL

Программа выдает undefined

Ответы (1 шт):