I am new to JS, my plan is to build a simple calculator using 4 functions:
calculate();
getOperator();
getResults();
clearInputField();
However, I am struggling right at the beginning. I already converted my NodeList into an array. However, this array consists of Divs. I only want to get the innerHTML value of each index and pass this value to calculate. Would anyone be able to shed me some light on how could I achieve that?
let calcNumber = document.querySelectorAll("[data-number]");
let cellsArr = Array.prototype.slice.call(calcNumber);
let operatorsValue = document.querySelectorAll("[data-operator]");
let equal = document.getElementById("equal");
calcNumber.forEach((cell) => {
cell.addEventListener("click", calculate);
});
// operatorsValue.forEach((opt) => {
// opt.addEventListener("click", getOperator);
// });
// equal.addEventListener("click", getResults);
let value1;
let value2;
let results;
function calculate() {
}
---HTML--
<body>
<div class='main-container'>
<input>
<div id="display"></div>
<div data-firstValue class="firstValue"></div>
<div data-secondValue class="secondValue"></div>
<div class="calculator-container">
<div data-number="0" class="cell">0</div>
<div data-number="1" class="cell">1</div>
<div data-number="2" class="cell">2</div>
<div data-number class="cell">3</div>
<div data-number class="cell">4</div>
<div data-number class="cell">5</div>
<div data-number class="cell">6</div>
<div data-number class="cell">7</div>
<div data-number class="cell">8</div>
<div data-number class="cell">9</div>
<div data-operator class="cell">+</div>
<div data-operator class="cell">-</div>
<div data-operator class="cell">x</div>
<div data-operator class="cell">÷</div>
<div id="equal" data-equals class="cell">=</div>
<div data-delete class="cell">AC</div>
<div data-singleDelete class="cell">←</div>
</div>
<script src="script1.js"></script>
</body>
</html>