[gelöst] HTML Nachkommastellen auf 2 begrenzen

fred0815 · August 28, 2024 at 9:43 AM New

Ich habe ein kleines Script, welches mir den Innenwiderstand eines Akkus ausrechnet:

HTML

<html>
<center>
<script>
function calc() {
        SpannungUnbelastet=document.getElementById("Uun").value.replace(",",".");
        SpannungBelastet=document.getElementById("Ube").value.replace(",",".");
        Ampere=document.getElementById("Amp").value.replace(",",".");
        Innenwiderstand=(SpannungUnbelastet-SpannungBelastet)/Ampere;
        document.getElementById("Ohm").value=Innenwiderstand;
        document.getElementById("mOhm").value=Innenwiderstand*1000;
}
</script>
<form>
<table>
<tr>
<td>Spannung unbelastet:</td>
<td><input type="tel" id="Uun" value="42.36" /> Volt</td>
</tr>
<tr>
<td>Spannung belastet:</td>
<td><input type="tel" id="Ube" value="41.65" /> Volt</td>
</tr>
<tr>
<td>Strom:</td>
<td><input type="tel" id="Amp" value="10.93" /> Ampere</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><input type="button" value="Ausrechnen" onclick="calc()" />
<input type="reset" value="L&#246;schen" />
</td>
</tr>
<tr>
<td>Innenwiderstand:</td>
<td><input id="Ohm" readonly="readonly" /> Ohm</td>
</tr>
<tr>
<td>Innenwiderstand:</td>
<td><input id="mOhm" readonly="readonly" /> mOhm</td>
</tr>
</table>
</form>
</center>
</html>

Display More

Leider zeigt mir das einige Nachkommastellen:

Wie kann man am einfachsten die Nachkommastellen auf zwei begrenzen ?

Bot · Vor 5 Minuten

[gelöst] HTML Nachkommastellen auf 2 begrenzen? Schau mal ob du hier fündig wirst!

Der_Imperator · August 28, 2024 at 10:03 AM New

Geht mit Javascript. .toFixed(nummer)

Code

        document.getElementById("Ohm").value=Innenwiderstand.toFixed(2);

fred0815 · August 28, 2024 at 10:16 AM New

Hat geklappt.

Danke.

Das mit toFixed(2) hatte ich auch schon gelesen, aber wusste nicht wohin damit.

Bot · Vor einem Moment

__blackjack__ · August 28, 2024 at 11:11 AM New

Anmerkungen zum Quelltext: Das ist kein gültiges HTML, Browser werden das im „Quirks Mode“ interpretieren. Ein Doctype müsste angegeben werden, es fehlen <head> und <body>.

Ein bisschen Einrückung wäre nett, um die Struktur besser erkennen zu können.

Spannung und Strom sind keine Telefonnummern. Wie ist das denn passiert? Auf Mobilgeräten könnte das ziemlich nervig werden da Zahlen einzugeben.

Beim JavaScript sind alle Variablen undeklariert.

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>&hellip;</title>
    <script>
      function getNumber(id) {
        return document.getElementById(id).value.replace(',', '.');
      }
      
      function setValue(id, value) {
        document.getElementById(id).value = value;
      }

      function calc() {
        let spannungUnbelastet = getNumber('Uun');
        let spannungBelastet = getNumber('Ube');
        let ampere = getNumber('Amp');
        let innenwiderstand = (spannungUnbelastet - spannungBelastet) / ampere;
        setValue('Ohm', innenwiderstand.toFixed(2));
        setValue('mOhm', (innenwiderstand * 1000).toFixed(2));
      }
    </script>
  </head>
  <body>
    <form>
      <table style="margin-left: auto; margin-right: auto;">
        <tr>
          <td>Spannung unbelastet:</td>
          <td><input type="number" step="any" id="Uun" value="42.36"> Volt</td>
        </tr>
        <tr>
          <td>Spannung belastet:</td>
          <td><input type="number" step="any" id="Ube" value="41.65"> Volt</td>
        </tr>
        <tr>
          <td>Strom:</td>
          <td><input type="number" step="any" id="Amp" value="10.93"> Ampere</td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: center;">
            <input type="button" value="Ausrechnen" onclick="calc()">
            <input type="reset" value="L&ouml;schen">
          </td>
        </tr>
        <tr>
          <td>Innenwiderstand:</td>
          <td><input id="Ohm" readonly="readonly"> Ohm</td>
        </tr>
        <tr>
          <td>Innenwiderstand:</td>
          <td><input id="mOhm" readonly="readonly"> mOhm</td>
        </tr>
      </table>
    </form>
  </body>
</html>

Display More

Tabellen zur Formatierung zu missbrauchen ist natürlich auch noch unschön.

fred0815 · August 28, 2024 at 6:12 PM New

Quote from __blackjack__

Spannung und Strom sind keine Telefonnummern. Wie ist das denn passiert? Auf Mobilgeräten könnte das ziemlich nervig werden da Zahlen einzugeben.

Es ist doch leichter wenn das Zahlenfeld am Handy aufgeht, statt der Tastatur, damit man die Zahlen eintippen kann, oder ?

noisefloor · August 28, 2024 at 6:47 PM New

Hallo,

das sollte auch funktionieren, wenn man dem input Feld das Attribut inputmode="numeric" mitgibt.

Gruß, noisefloor

Bot · Vor einem Moment

DistroEx · August 28, 2024 at 7:35 PM New

Quote from fred0815

Es ist doch leichter wenn das Zahlenfeld am Handy aufgeht, statt der Tastatur, damit man die Zahlen eintippen kann, oder ?

Wenn Du Kommazahlen eingeben musst hast Du mit der Tastatur für Telefonnummern aber ein Problem. Ich sollte neulich mein Geburtsdatum in so einem Schrunz eingeben, war am Handy nicht möglich, ich konnte zum Glück auf C&P ausweichen.

Bergwichtel · August 29, 2024 at 1:20 AM New

Da wir hier im Webstrang sind, möchte ich meinen HTML, CSS (und JS)-Senf auch noch dazugeben.

Tabellen (table) zur optischen Gestaltung ist sowas von letztes Jahrtausend . Heute würde man wohl grid verwenden. Eine gute Gelegenheit mir mal einen Überblick darüber zu verschaffen (Habe bis jetzt nur rumgeflext.)

Eingangs noch ein paar Anmerkungen zum HTML:

Charset
Ersteinmal sollte man sich darüber klar werden, wo man veröffentlicht (Webserver, File, ...) und dann das Dokument in dem entsprechenden Charset erstellen. Für forum-raspberrypi.de wäre es:
lynx -dump -head https://forum-raspberrypi.de | grep 'Content-Type'
Content-Type: text/html; charset=utf-8
Damit alles auch richtig bei file:/ dargestellt wird, schreibt man den Charset als Metaangabe in das Dokument
<meta charset="utf-8">
viewport
Weil Handys mit erwähnt wurden, damit der Browser die Seite nicht verkleinert darstellt und man zoomen muß, sagt man den Browser: Zeige 1:1 an.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Jetzt bin ich selbst erschrocken, wie groß das geworden ist. Verdammt viel CSS - da läßt sich sicherlich noch optimieren. Habe alles so angelegt, das man viele <section> mit Berechnungsformularen über flex einbinden kann. Dann relativiert sich auch das CSS. Ist bestimmt verbesserungswürdig - ist halt meine erste Datei mit grid.

Edit: Das Vorschaubildchen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ri-Rechner</title>

  <style>
    :root {
        --color-fg: #00007f;
        --color-bg: #55aaff;
        --color-border: #9bffff;
    }
    * {
        box-sizing: border-box;
        margin:0;
    }
    body {
        color: var(--color-fg);
        background-color: var(--color-bg);
    }
    fieldset {
        display: inline-block;
        margin: 1rem 1.5rem 0;
        border: 5px double var(--color-border);
        border-radius: 0.5rem;
    }
    legend {
        padding: 0.2rem 0.6rem;
        color: var(--color-bg);
        background-color: var(--color-fg);
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
    }
    form {
        display: inline-grid;
        grid-template-columns: 10rem 5rem 2rem;
        gap: 0.5rem;
        min-width:18rem;
    }

    .buttons {
        grid-column-start: 1;
        grid-column-end: 4;
        place-content: start center;
        line-height: 2rem;
    }
    form input {
        text-align: right;
    }
    form p {
        padding-top: .2rem;
    }
    input.btn  {
        width: 6rem;
        text-align: center;
    }
  </style>
  <script>
    // Edit: Die Funktion getNumber(id) brauchts nicht (da .valueAsNumber)
    // function getNumber(id) {
    //    return document.getElementById(id).value.replace(',', '.');
    //}
    function setValue(id, value) {
        document.getElementById(id).value = value;
    }
    function calc() {
        let Ukl   = document.getElementById("Ukl").valueAsNumber;
        let Ulast = document.getElementById("Ult").valueAsNumber;
        let Imess = document.getElementById("Amp").valueAsNumber;
        let Ri = (Ukl - Ulast) / Imess;
        setValue('Ohm', Ri.toFixed(2));
        setValue('mOhm', (Ri * 1000).toFixed(2));
    }
  </script>

</head>
<body>

<section>
  <fieldset>
  <legend>Innenwiderstand</legend>
    <form>
        <p>Spannung unbelastet:</p>
        <input id="Ukl" type="number" step="any" value="9,00">
        <p>V</p>

        <p>Spannung belastet:</p>
        <input id="Ult" type="number" step="any" value="8,50">
        <p>V</p>

        <p>Strom:</p>
        <input id="Amp" type="number" step="any" value="10,99">
        <p>A</p>

        <p class="buttons">
            <input class="btn" type="button" value="Berechnen" onclick="calc()">
            <input class="btn" type="reset" value="Löschen">
        </p>

        <p>Innenwiderstand:</p>
        <input id="Ohm" readonly="readonly">
        <p>Ω</p>
        <p>Innenwiderstand:</p>
        <input id="mOhm" readonly="readonly">
        <p>MΩ</p>
    </form>
  </fieldset>
</section>

</body>
</html>

Display More

Edit: Achja, für Benutzer von Opera - der kann grid nicht.

__blackjack__ · August 29, 2024 at 10:49 AM New

Das mit dem Charset hatte ich weggelassen, weil ja mit Character-Entities gearbeitet wurde, also der Quelltext reines ASCII war.

Bot · Vor einem Moment

[gelöst] HTML Nachkommastellen auf 2 begrenzen

fred0815 August 28, 2024 at 10:17 AM

Participate now!

Tags

Users Viewing This Thread

fred0815 August 28, 2024 at 10:17 AM

Participate now!

Tags

Users Viewing This Thread

fred0815 August 28, 2024 at 10:17 AM