4. Umrechnungstabelle in JavaScript!

Umrechnungstabelle in JavaScript!

  • C
    Gesperrt

    Hallo, ich wollte eine Umrechnungstabelle in JavaScript schreiben, bin aber kein JavaScript-Crack. 😞

    Könnt ihr mal kurz reviewen, ob das so geht?

    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Umrechnungstabelle</title>
    <style>
      table,
      th,
      td {
        border: solid black 1px;
      }
      td {
        width: 125px;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <div id="div-1"></div>
      <br>
      <div>
        <button
          id="button-1"
          onclick="(function () {
            let btn = document.getElementById('button-1');
            btn.disabled = true;
            let t = new Date();
            t.setSeconds(t.getSeconds() + 30);
            let inter = setInterval(function() {
              let t2 = new Date();
              if (t2 < t) {
                btn.textContent = 'Kurse aktualisieren! (' + Number((t - t2) / 1000.0).toFixed(1) + ')'; 
              } else {
                clearInterval(inter);
                btn.textContent = 'Kurse aktualisieren!';
                btn.disabled = false;
              }
            }, 100);
        initTable();
      })();
      return false;"
        >
          Kurse aktualisieren!
        </button>
      </div>
      <br>
      <table id="table-1">
        <tr>
          <th>Coin</th>
          <th>Betrag</th>
          <th>Betrag $</th>
          <th>Kurs</th>
          <th>Betrag Neu</th>
        </tr>
      </table>
    </main>
    <footer></footer>
    <script>
      async function getPrices() {
        const response1 = await fetch("https://api.livecoinwatch.com/coins/list", {
          method: "POST",
          headers: {
            "content-type": "application/json",
            "x-api-key": "geheim",
          },
          body: JSON.stringify({
            currency: "USD",
            sort: "rank",
            order: "ascending",
            offset: 0,
            limit: 50,
            meta: false,
          }),
        });
        const jsonData1 = await response1.json();
        console.log(jsonData1);
        return jsonData1;
      }

      function getRates() {
        let rates = [];
        let t = document.getElementById("table-1");
        for (let i = 1; i < t.rows.length; i++) {
          let r = t.rows[i];
          let u = parseFloat(r.cells[3].textContent);
          rates.push(u);
        }
        console.log(rates);
        return rates;
      }

      async function initTable() {
        let prices = await getPrices();
        let t = document.getElementById("table-1");
        for (let i = t.rows.length - 1; i > 0; i--) {
          t.deleteRow(i);
        }
        {
          let rate = 1.0;
          let row = t.insertRow();
          {
            let c = row.insertCell(0);
            c.textContent = "$";
          }
          {
            let c = row.insertCell(1);
            c.textContent = "10.0";
          }
          {
            let c = row.insertCell(2);
            c.textContent = "10.0";
          }
          {
            let c = row.insertCell(3);
            c.textContent = "1.0";
          }
          {
            let c = row.insertCell(4);
            let inp = document.createElement("input");
            inp.addEventListener("input", function (evt) {
              if (this.value.length > 0) {
                try {
                  let amount = parseFloat(this.value);
                  let usdAmount = amount * rate;
                  t.rows[1].cells[1].textContent = usdAmount;
                  t.rows[1].cells[2].textContent = usdAmount;
                  for (let i = 2; i < t.rows.length; i++) {
                    let r = t.rows[i];
                    let r1 = parseFloat(r.cells[3].textContent);
                    r.cells[1].textContent = usdAmount / r1;
                    r.cells[2].textContent = usdAmount;
                  }
                } catch (error) {
                  console.log(error);
                }
              }
            });
            c.appendChild(inp);
          }
        }
        prices.forEach((p) => {
          let rate = parseFloat(p.rate);
          let row = t.insertRow();
          {
            let c = row.insertCell(0);
            c.textContent = p.code;
          }
          {
            let c = row.insertCell(1);
            c.textContent = rate * 10.0;
          }
          {
            let c = row.insertCell(2);
            c.textContent = "10.0";
          }
          {
            let c = row.insertCell(3);
            c.textContent = rate;
          }
          {
            let c = row.insertCell(4);
            let inp = document.createElement("input");
            inp.addEventListener("input", function (evt) {
              if (this.value.length > 0) {
                try {
                  let amount = parseFloat(this.value);
                  let usdAmount = amount * rate;
                  t.rows[1].cells[1].textContent = usdAmount;
                  t.rows[1].cells[2].textContent = usdAmount;
                  for (let i = 2; i < t.rows.length; i++) {
                    let r = t.rows[i];
                    let r1 = parseFloat(r.cells[3].textContent);
                    r.cells[1].textContent = usdAmount / r1;
                    r.cells[2].textContent = usdAmount;
                  }
                } catch (error) {
                  console.log(error);
                }
              }
            });
            c.appendChild(inp);
          }
        });
        document.getElementById("div-1").textContent = "Stand: " + new Date();
      }

      initTable();
    </script>
  </body>
</html>

    Und zwar bin ich mir an zwei Stellen unsicher:

    Zeile 26: Wie komme ich in einer inline button onlick listener function an den Button heran, auf dem der Listener registriert ist? this geht leider nich.

    Zeile 125 und 186: Wie kann ich überprüfen, ob ein gültiger float-Wert eingegeben wurde?

    Vielen Dank und bitte verzeiht die komische Formatierung an manchen Stellen.

    0 1 Antwort
  • C
    Gesperrt

    Habe mal etwas aufgeräumt, aber meine zwei Fragen habe ich immer noch:

    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Umrechnungstabelle</title>
    <style>
      table,
      th,
      td {
        border: solid black 1px;
      }
      td {
        width: 125px;
      }
      main {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <div id="div-1"></div>
      <br />
      <div>
        <button
          id="button-1"
          onclick="(function () {
            let btn = document.getElementById('button-1');
            btn.disabled = true;
            let t = new Date();
            t.setSeconds(t.getSeconds() + 30);
            let inter = setInterval(function() {
              let t2 = new Date();
              if (t2 < t) {
                btn.textContent = 'Kurse aktualisieren! (' + Number((t - t2) / 1000.0).toFixed(1) + ')'; 
              } else {
                clearInterval(inter);
                btn.textContent = 'Kurse aktualisieren!';
                btn.disabled = false;
              }
            }, 100);
        initTable();
      })();
      return false;"
        >
          Kurse aktualisieren!
        </button>
      </div>
      <br />
      <table id="table-1">
        <tr>
          <th>Coin</th>
          <th>Betrag</th>
          <th>Betrag $</th>
          <th>Kurs</th>
          <th>Betrag Neu</th>
        </tr>
      </table>
    </main>
    <footer></footer>
    <script>
      async function getPrices() {
        const response1 = await fetch("https://api.livecoinwatch.com/coins/list", {
          method: "POST",
          headers: {
            "content-type": "application/json",
            "x-api-key": "geheim",
          },
          body: JSON.stringify({
            currency: "USD",
            sort: "rank",
            order: "ascending",
            offset: 0,
            limit: 100,
            meta: false,
          }),
        });
        const jsonData1 = await response1.json();
        console.log(jsonData1);
        return jsonData1;
      }

      function insertRow(table, name, rate) {
        let row = table.insertRow();
        {
          let c = row.insertCell(0);
          c.textContent = name;
        }
        {
          let c = row.insertCell(1);
          c.textContent = rate * 10.0;
        }
        {
          let c = row.insertCell(2);
          c.textContent = 10.0;
        }
        {
          let c = row.insertCell(3);
          c.textContent = rate;
        }
        {
          let c = row.insertCell(4);
          let inp = document.createElement("input");
          inp.addEventListener("input", function (evt) {
            if (this.value.length > 0) {
              try {
                let amount = parseFloat(this.value);
                let usdAmount = amount * rate;
                table.rows[1].cells[1].textContent = usdAmount;
                table.rows[1].cells[2].textContent = usdAmount;
                for (let i = 2; i < table.rows.length; i++) {
                  let r = table.rows[i];
                  let r1 = parseFloat(r.cells[3].textContent);
                  r.cells[1].textContent = usdAmount / r1;
                  r.cells[2].textContent = usdAmount;
                }
              } catch (error) {
                console.log(error);
              }
            }
          });
          c.appendChild(inp);
        }
      }

      async function initTable() {
        let prices = await getPrices();
        let table = document.getElementById("table-1");
        for (let i = table.rows.length - 1; i > 0; i--) {
          table.deleteRow(i);
        }
        insertRow(table, "$", 1.0);
        prices.forEach((p) => {
          insertRow(table, p.code.replaceAll("_", ""), parseFloat(p.rate));
        });
        document.getElementById("div-1").textContent = "Stand: " + new Date();
      }

      initTable();

      function round5(value) {
        return Number(value).toFixed(5);
      }
    </script>
  </body>
</html>
    0

  • @cyborg_beta
    Zeile 26: Die Funktion kann ein Event objekt akzeptieren, die hat wiederum ein "target" member, welches der Button ist.
    https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

    Floatwert prüfen: https://stackoverflow.com/questions/10150877/allowing-input-only-for-float-number

    0
  • C
    Gesperrt

    Ja, habe es inzwischen selber hinbekommen. Es ist jetzt kürzer, besser und "schöner":

    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Umrechnungstabelle</title>
    <style>
      table,
      th,
      td {
        border: solid black 1px;
      }
      td {
        width: 125px;
      }
      main {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <div id="div-1"></div>
      <br />
      <div>
        <button
          id="button-1"
          onclick="(function (btn) {
            btn.disabled = true;
            let t = new Date();
            t.setSeconds(t.getSeconds() + 30);
            let inter = setInterval(function() {
              let t2 = new Date();
              if (t2 < t) {
                btn.textContent = 'Kurse aktualisieren! (' + Number((t - t2) / 1000.0).toFixed(1) + ')'; 
              } else {
                clearInterval(inter);
                btn.textContent = 'Kurse aktualisieren!';
                btn.disabled = false;
              }
            }, 100);
        initTable();
      })(this);
      return false;"
        >
          Kurse aktualisieren!
        </button>
      </div>
      <br />
      <table id="table-1">
        <tr>
          <th>Coin</th>
          <th>Betrag</th>
          <th>Betrag $</th>
          <th>Kurs</th>
          <th>Betrag Neu</th>
        </tr>
      </table>
    </main>
    <footer></footer>
    <script>
      let prices;

      async function getPrices() {
        const response1 = await fetch("https://api.livecoinwatch.com/coins/list", {
          method: "POST",
          headers: {
            "content-type": "application/json",
            "x-api-key": "",
          },
          body: JSON.stringify({
            currency: "USD",
            sort: "rank",
            order: "ascending",
            offset: 0,
            limit: 100,
            meta: false,
          }),
        });
        const jsonData1 = await response1.json();
        console.log(jsonData1);
        return jsonData1;
      }

      function insertRow(table, name, rate) {
        let row = table.insertRow();
        {
          let c = row.insertCell(0);
          c.textContent = name;
        }
        {
          let c = row.insertCell(1);
          c.textContent = round10(rate);
        }
        {
          let c = row.insertCell(2);
          c.textContent = round10(1.0);
        }
        {
          let c = row.insertCell(3);
          c.textContent = round10(rate);
        }
        {
          let c = row.insertCell(4);
          let inp = document.createElement("input");
          inp.addEventListener("input", function (evt) {
            if (this.value.length > 0 && Number(this.value) === parseFloat(this.value)) {
              let amount = parseFloat(this.value);
              let usdAmount = amount * rate;
              table.rows[1].cells[1].textContent = round10(usdAmount);
              table.rows[1].cells[2].textContent = round10(usdAmount);
              for (let i = 2; i < table.rows.length; i++) {
                let row2 = table.rows[i];
                let rate2 = parseFloat(prices[i - 2].rate);
                row2.cells[1].textContent = round10(usdAmount / rate2);
                row2.cells[2].textContent = round10(usdAmount);
              }
            }
          });
          c.appendChild(inp);
        }
      }

      async function initTable() {
        prices = await getPrices();
        let table = document.getElementById("table-1");
        for (let i = table.rows.length - 1; i > 0; i--) {
          table.deleteRow(i);
        }
        insertRow(table, "$", 1.0);
        prices.forEach((p) => {
          insertRow(table, p.code.replaceAll("_", ""), parseFloat(p.rate));
        });
        document.getElementById("div-1").textContent = "Stand: " + new Date();
      }

      initTable();

      function round10(value) {
        return Number(value).toFixed(10);
      }
    </script>
  </body>
</html>

    Die inline-Funktion konnte ich mit this aufrufen, und der float-Wert wird mit Number(this.value) === parseFloat(this.value) auf Validität überprüft, und die letzten Preise werden jetzt zwischengespeichert und nicht mehr (umständlich) aus der Tabelle gezogen und geparst.

    Falls dennoch irgendetwas Komisches auffällt, bin ich für Ratschläge offen.

    0
  • C
    Gesperrt

    Dieser Beitrag wurde gelöscht!
    0
  • C
    Gesperrt

    Dieser Beitrag wurde gelöscht!
    0
Anmelden zum Antworten