Javascript function changes cell value in table to NaN instead of the required integer

Question

My javascript:

function kalkulaator(raskus, kordused) {
    var sada = Math.ceil(raskus / (1.0278 - (0.0278 * kordused)));
    var uheksakmndviis = Math.ceil(sada * 0.95)

    var x = document.getElementById("andmete_tabel").rows[1].cells;
    var arv_soneks = sada.toString();
    var y = document.getElementById("andmete_tabel").rows[2].cells;
    x[1].innerHTML = arv_soneks;
    y[1].innerHTML = uheksakmndviis.toString();
  se  
}

My HTML code:

<!DOCTYPE html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="text/javascript" src="script.js"></script>

    <div class="tekst">
        <p>Test</p>
        <label id="kordused">Korduste arv</label>
        <input id="kordused" type="number">
        <br>
        <label id="raskus">Raskus (kg)</label>
        <input id="raskus" type="number">
        <br>
        <button onclick="kalkulaator(document.getElementById('raskus'), document.getElementById('kordused'))">Sisesta</button>
    </div>
    <div id="andmed" class="tekst">
        <table id="andmete_tabel" class="tabel">
            <tr>
                <th>Protsent maksimumist</th>
                <th>Raskus</th>
                <th>Kordused</th>
            </tr>
            <tr>
                <th id="th1">100%</th>
                <th id="th2">0</th>
                <th id="th3">1</th>
            </tr>
            <tr>
                <th id="th4">95%</th>
                <th id="th5">0</th>
                <th id="th6">2</th>
            </tr>
        </table>
    </div>
</body>

Whenever i enter the numbers into the inputs, it changes the table cells with id 'th2' and 'th5' into NaN, eventhough it should change them to the respective values attained from the function kalkulaator()

I tried different forms of javascript like document.getElementById('th2').innerHTML = sada.toString() but i got the same NaN problem.

Would love for some ideas on what to do to fix the issue.

`document.getElementById('raskus')` doesn't return a number, same with `document.getElementById('kordused')` — Konrad, Nov 21 '22 at 19:08
learn how to change values from form inputs (always strings) into numbers — Kinglish, Nov 21 '22 at 19:11

Konrad · Answer 1 · 2022-11-21T19:25:06.210

Problem

document.getElementById('raskus') - returns reference to the object
document.getElementById('kordused').value - returns a string value
document.getElementById('kordused').valueAsNumber - returns value as a number

You also have two elements with the same id. You should use for instead for labels

Solution

function kalkulaator(raskus, kordused) {
  console.log(raskus)
  var sada = Math.ceil(raskus / (1.0278 - (0.0278 * kordused)));
  var uheksakmndviis = Math.ceil(sada * 0.95)

  var x = document.getElementById("andmete_tabel").rows[1].cells;
  var arv_soneks = sada.toString();
  var y = document.getElementById("andmete_tabel").rows[2].cells;
  x[1].innerHTML = arv_soneks;
  y[1].innerHTML = uheksakmndviis.toString();
}

<div class="tekst">
  <p>Test</p>
  <label for="kordused">Korduste arv</label>
  <input id="kordused" type="number">
  <br>
  <label for="raskus">Raskus (kg)</label>
  <input id="raskus" type="number">
  <br>
  <button onclick="kalkulaator(document.getElementById('raskus').valueAsNumber, document.getElementById('kordused').valueAsNumber)">Sisesta</button>
</div>
<div id="andmed" class="tekst">
  <table id="andmete_tabel" class="tabel">
    <tr>
      <th>Protsent maksimumist</th>
      <th>Raskus</th>
      <th>Kordused</th>
    </tr>
    <tr>
      <th id="th1">100%</th>
      <th id="th2">0</th>
      <th id="th3">1</th>
    </tr>
    <tr>
      <th id="th4">95%</th>
      <th id="th5">0</th>
      <th id="th6">2</th>
    </tr>
  </table>
</div>

The ``s have `type="number"`. Use [`.valueAsNumber`](//developer.mozilla.org/en/docs/Web/API/HTMLInputElement#Properties) instead. — Sebastian Simon, Nov 21 '22 at 19:16

Javascript function changes cell value in table to NaN instead of the required integer

1 Answers1

Problem

Solution