'How to programm a bit byte converter/ calculator with this table using javascript and this html code?

How to programm a bit byte converter/ calculator with this table using javascript and this html code

     <table>
<tbody><tr><td class="unit">Bit (b):</td><td><input type="number"></td></tr>
<tr><td class="unit">Byte (B):</td><td><input type="number"></td></tr>
<tr><td class="unit">Kilobyte (kB):</td><td><input type="number"></td></tr>
<tr><td class="unit">Megabyte (MB):</td><td><input type="number" ></td></tr>
<tr><td class="unit">Gigabyte (GB):</td><td><input type="number" ></td></tr>
<tr><td class="unit">Terabyte (TB):</td><td><input type="number"></td></tr>
<tr><td class="unit">Petabyte (PB):</td><td><input type="number" ></td></tr>
<tr><td class="unit">Exabyte (EB):</td><td><input type="number" ></td></tr>
</tbody></table><br>
<input class="press" type="button" value="Berechnen">&nbsp;&nbsp;
<input class="press" type="reset" value="Löschen">
</form>
<br><br>
<br>*
javascripthtmlcalculatorbit


Solution 1:[1]

You can try something like this:

const units = [
  8,
  1,
  1024,
  1048576,
  1073741824,
  1099511627776,
  1125899906842624,
  1152921504606846976,
]

let table = document.getElementById("myTable");

function changeHandler() {
  let input = this.firstChild.value
  let idx = this.firstChild.id
  let bytes = (idx == 0) ? input / units[idx] : input * units[idx]

  units.forEach((item, idx) => {
    let val = (idx == 0) ? bytes * units[idx] : bytes / units[idx]

    table.rows[idx].cells[1].firstChild.value = val
  })

}

document.querySelectorAll("#myTable td")
  .forEach(e => e.addEventListener("change", changeHandler));
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
  </head>
  <body>
    <table id="myTable">
      <tbody>
        <tr><td class="unit">Bit (b):</td><td><input id="0" type="number"></td></tr>
        <tr><td class="unit">Byte (B):</td><td><input id="1" type="number"></td></tr>
        <tr><td class="unit">Kilobyte (kB):</td><td><input id="2" type="number"></td></tr>
        <tr><td class="unit">Megabyte (MB):</td><td><input id="3" type="number" ></td></tr>
        <tr><td class="unit">Gigabyte (GB):</td><td><input id="4" type="number" ></td></tr>
        <tr><td class="unit">Terabyte (TB):</td><td><input id="5" type="number"></td></tr>
        <tr><td class="unit">Petabyte (PB):</td><td><input id="6" type="number" ></td></tr>
        <tr><td class="unit">Exabyte (EB):</td><td><input id="7" type="number" ></td></tr>
      </tbody>
    </table>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HTF

Related Questions