0

When I tried putting in values any value that is an integer it will just print out [object HTMLinputElement] x 1 = NaN. I have also tried changing the .innerHTML to .innerText and .value but it still result in the same thing. This result in the multiplication operation not executing.

function calculate() {
  for (var i = 1; i <= 12; i++) {
    document.getElementById('output').innerHTML += (tbInteger + " x " + i + " = " + tbInteger * i + '<br>')
  }
}
<h1>Math Drills</h1>
<!-- Math Operator Input -->
Select an arithmetic operation (* or +):
<input type="text" id="tbOperator" value="*">
<br> <br>

<!-- Integer Input -->
Enter a positive integer value between 1 and 100:
<input type="number" id="tbInteger">
<br> <br>

<!-- Buttons -->
<input type="button" value="Calculate" class="button" onclick="calculate();" />
<input type="button" value="Clear" class="button" onclick="" />

<!-- Output -->
<div id="output"></div>
j08691
  • 204,283
  • 31
  • 260
  • 272
cheese
  • 1
  • Use ``const operators = { "*": { method: (a, b) => a * b, symbol: "×" }, "+": { method: (a, b) => a + b, symbol: "+" } }; document.querySelector("input[value='Calculate']").addEventListener("click", () => { const tbInteger = document.getElementById("tbInteger").valueAsNumber; const { symbol, method } = operators[document.getElementById("tbOperator").value] ?? {}; if(method){ document.getElementById("output").replaceChildren(...Array.from({ length: 12 }).flatMap((_, i) => [ document.createElement("br"), `${tbInteger} ${symbol} ${i + 1} = ${method(tbInteger, (i + 1))}` ]).slice(1)); } });``. – Sebastian Simon Nov 01 '22 at 21:32
  • Don’t forget to [remove all `onclick` attributes](/q/11737873/4642212). Use this for the “Clear” button: `document.querySelector("input[value='Clear']").addEventListener("click", () => { Array.from(document.querySelectorAll("input[type='text'], input[type='number']")).forEach((elem) => (elem.value = "")); document.getElementById("output").replaceChildren(); });`. – Sebastian Simon Nov 01 '22 at 21:32

0 Answers0