Javascript Formular mit Placeholder rechnen?

Hallo,

ich habe folgenden Code:

<html>
    <head></head>
    <body>
        <input type="number" id="in1" placeholder="0">
        <input type="number" id="in2" placeholder="0">
        <input type="number" id="out">
        <input type="button" value="Weiter" onclick="
            out.value = parseFloat(in1.value) + parseFloat(in2.value);
        ">
    </body>
</html>

Wenn ich in ein Feld nichts eingebe, doll Javascript den placeholder (also 0) als Inhalt ansehen und mit diesem Wert weiterrechnen. Es klappt aber leider noch nicht. Kann mir da wer helfen?

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

14.04.2020, 11:13

Die Funktion parseFloat wird jeweils den Wert NaN zurückgeben, denn die Eingabefelder sind leer. Mit diesem Wert kannst du nicht weiterrechnen.

Passe es so an:

out.value = (parseFloat(in1.value) || 0) + (parseFloat(in2.value) || 0)

Es ist im Übrigen besser, wenn du solchen Code in eine eigene JS-Funktion auslagerst. Umso strikter du Logik (JS) und View (HTML) trennst, umso leichter wird es später sein, so ein Programm zu warten und den Überblick zu behalten.

PS.: Dein HTML-Dokument sollte stets aus einem Doctype und einem title-Tag bestehen. Andernfalls ist es invalid.

gehm1

Fragesteller

14.04.2020, 11:45

Danke für deine Hilfe. Die Datei war aber sowieso nur zum testen da.

Hey alle zusammen, kann mir jemand sagen, wieso auf der Konsole nicht "123" ausgegeben wird?

echo "</head><body style=\"font-family: Verdana;\">";
echo "<script type = 'text/JavaScript'>console.log('geht los:');console.log(document.getElementById('scannerInput').value);</script>";
echo "<input type=\"text\" id=\"scannerInput\" value=\"123\" />";

...zur Frage

JavaScript Texfeld leeren?

Ich habe folgendes Textfeld.

<input type="text" id="eingabe" placeholder="" value="">

Ich habe dazu in JavaScript in eine Funktion geschrieben die ausgeführt werden soll, wenn ein Button gedrückt wird. In dieser existieren folgende Zeilen Code.

document.getElementById("eingabe").setAttribute("value", "");
      document.getElementById("eingabe").setAttribute("placeholder", "Richtig");

Damit möchte ich erreichen, dass der Inhalt des Textfeldes geleert wird und in dem Textfeld im Hintergrund das Wort Richtig steht.

Jedoch wird das Textfeld nicht geleert.

...zur Frage

HTML-Code für Wurzelziehen/Radizieren?

Hallo,

ich bin relativ neu im Gebiet programmieren und brauche Hilfe. In unserer Info-AG haben wir die Aufgabe bekommen, einen Taschenrechner mit den Rechenzeichen +, -, *, /, ** und √ mit einem HTML-Code zu programmieren.

Das Problem, wo ich festhänge ist das √.

Ich weiß einfach nicht, wie ich es in meinen Code einbauen kann.

Hier ist, was ich soweit habe (Wurzel-Button funktioniert wie gesagt nicht):

<!DOCTYPE html>
<html>
  <head>
    <h1>Taschenrechner</h1>
    <style>
      h1 {
        font-family: Arial;
        text-align: center;
        color: navy;
      }

      body {
        font-family: Arial;
        text-align: center;
      }

      input {
        width: 100px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <form name="Taschenrechner">
      <input type="button" value="0" onClick="document.Taschenrechner.erg.value+='0'">
      <input type="button" value="1" onClick="document.Taschenrechner.erg.value+='1'">
      <input type="button" value="2" onClick="document.Taschenrechner.erg.value+='2'">
      <input type="button" value="3" onClick="document.Taschenrechner.erg.value+='3'">
      <input type="button" value="4" onClick="document.Taschenrechner.erg.value+='4'">
      <input type="button" value="5" onClick="document.Taschenrechner.erg.value+='5'">
      <input type="button" value="6" onClick="document.Taschenrechner.erg.value+='6'">
      <input type="button" value="7" onClick="document.Taschenrechner.erg.value+='7'">
      <input type="button" value="8"
 onClick="document.Taschenrechner.erg.value+='8'">
      <input type="button" value="9"
onClick="document.Taschenrechner.erg.value+='9'">
      <label1>Rechensymbole:</label1>
      <input type="button" value="+" onClick="document.Taschenrechner.erg.value+='+'">
      <input type="button" value="-" onClick="document.Taschenrechner.erg.value+='-'">
      <input type="button" value="*" onClick="document.Taschenrechner.erg.value+='*'">
      <input type="button" value="/" onClick="document.Taschenrechner.erg.value+='/'">
      <input type="button" value="**" onClick="document.Taschenrechner.erg.value+='**'">
      <input type="button" value= "Wurzel"
onClick:="document.Taschenrechner.erg.valueMath.sqrt='x'">
      <input type="button" value="=" onClick="document.Taschenrechner.erg.value=eval(document.Taschenrechner.erg.value)">
      <label2>Ergebnis:</label2>
      <input type="textfield" id="erg" value="">
      <input type="reset" value="Reset">
    </form>
  </body>
</html>

...zur Frage

HTML Label verschieben?

Möchte gerne das Label im untenstehenden HTML Code verschieben. Hab es mit margin im Css versucht weis aber nicht ganz genau wie es geht.

<!DOCTYPE html>

<html>

<head

<title>Probe Seite</title>

</head>

<body>

<h1> Textfelder erstellen </h1>

<label for "vname"> Vorname:

<button type="button" id="button"> auslesen </button>

</label for "vname">

</body>

</html>

...zur Frage

Wie kann ich eine dynamische HTML-Tabelle persistent erweitern?

Hey liebe GuteFrageNet-Community,

ich bastle gerade an einer Website, in der man eine Tabelle per Knopfdruck erweitern kann. Dies funktioniert soweit auch sehr gut, aber es wird nicht gespeichert, bzw. nur im Cache bei demjenigen, der den Knopfdruck ausgeführt und etwas hineingeschrieben hat.

Gibt es eine Möglichkeit, diese Tabelle zu "speichern" und es zu übernehmen?

Und noch eine weitere kleine Frage: In der Tabelle kann man wie oben schon beschrieben, etwas hineinschreiben. Wie kann man die Schriftfarbe dynamisch ändern? Also klar, mit type="color". Aber wie genau?

Hier der HTML und Javascript-Code:

<form method='post' name='first'>
  <table id='tab' border=5 id="box">
    <colgroup>
      <col width="40%">
      <col height="50%">
    </colgroup>
    <tbody>
      <th>Datum <br> Uhrzeit</th>
      <th>Map</th>
      <th>Ergebnis</th>
      <th>Spieler</th>
    </tbody>
    <tr>
      <td>
        <input id="changetext" type='text' type="color" name='Date' placeholder='Datum/Uhrzeit'>
      </td>
      <td>
        <input id="changetext" type='text' name='Map' placeholder='Map'>
      </td>
      <td>
        <input id="changetext" type='text' name='Result' placeholder='Ergebnis'>
      </td>
      <td>
        <input id="changetext" type='text' name='Player' placeholder='Spieler'>
      </td>
    </tr>
  </table>
  <br>
  <input type='button' value='neue Zeile' onClick='clone_this()'>
  <input id="changetext" type="color">
</form>
<script>
  var input = document.getElementById("changetext");
  var text = document.getElementById("text");

  input.addEventListener('change', function () {
    text.style.color = this.value;
  });
</script>

...zur Frage

JavaScript Funktion Summe?

Hallo ich möchte ein einfaches Programm scheiben was von zwei input feldern die Zahlen nach button Bestätigung zusammenrechnet. Bin mir bei meinem Code nicht sicher. Es addiert die Zahlen nicht sondern schreibt sie zusammen. 1+2=12

<script>
function summe()
{
var z1=document.getElementById('zahl1').value;
var z2=document.getElementById('zahl2').value;


var ergebnis= (z1+z2);
document.write("Das Ergebnis ist:"+ ergebnis);
}
</script>
<input type=text id="zahl1">
<input type=text id="zahl2">
<input type=button onclick="summe()" value="=">
</body>

...zur Frage

JavaScript - Formularfelder dynamisch hinzufügen?

Ich habe ein HTML-Formular. Darin soll man in eine Datenbank eine Frage mit x Antworten speichern kann. Habe folgendes als Vorlage benutzt, komme aber nicht weiter:

https://werner-zenk.de/javascript/formularfelder_dynamisch_hinzufuegen.php

Ich benötige aber neben einem Input-Feld für eine Antwort nur die Möglichkeit zur Definition, ob diese Antwort Richtig oder Falsch ist.

Habe jetzt folgendes Versucht... (Auszug für function feld_plus())

<script>
function feld_plus() {
 if (feld <= 9) {
  feld++;
 document.getElementById('dynamic_input').innerHTML = "";
  for (var counter = 1; counter <= feld; counter++) {
   var label = "Antwort " + counter;
   var inhalt = document.getElementById("antwort" + counter).value;
   document.getElementById('dynamic_input').innerHTML += "<label style=\"float: left;\">" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt + "' onInput='antwort(this.value, \"" + feld + "\")'></label><fieldset><input type='radio' id='true" + counter + "' name='statuscode' value='11'><label for='true" + counter + "'>Richtig</label> <input type='radio' id='false" + counter + "' name='statuscode' value='12'><label for='false" + counter + "'>Falsch</label></fieldset><br>";
  }
 }
}
function antwort(inhalt, feld) { document.getElementById("antwort" + feld).value = inhalt; } </script>
<a href="question_add.php"><button>Frage erstellen</button></a> <hr> <h2>Fragestellung</h2> <p>Nachfolgend die Frage eintragen...</p> <form id="question_add" action="question_action.php" method="POST" onsubmit="return confirm('Frage speichern?');"> <textarea form="question_add" name="questionText" wrap="soft" rows="2" placeholder="Wie lautet ...?" required></textarea><br> <hr> <h2>Antworten</h2> <p>Nachfolgend die Antwortmöglichkeiten angeben.</p> <p>Antworten hinzufügen <input type="button" value="-" onClick="feld_minus();"><input type="button" value="+" onClick="feld_plus();"></p>
<div id="dynamic_input"></div>
<!-- Antworten --> <input type="hidden" id="antwort1"> <input type="hidden" id="antwort2"> <input type="hidden" id="antwort3"> <input type="hidden" id="antwort4"> <input type="hidden" id="antwort5"> <input type="hidden" id="antwort6"> <input type="hidden" id="antwort7"> <input type="hidden" id="antwort8"> <input type="hidden" id="antwort9"> <input type="hidden" id="antwort10">

<hr>
<input type="submit" value="Frage speichern" >
</form>

...optisch passt dass... allerdings sind die Radio-Buttons buggy...

Definiere ist Antwort1 als richtig, und dann Antwort2 als falsch, so ist bei Antwort1 nicht mehr ausgewählt... als wenn das Fieldset nicht korrekt abgeschlossen wird.

Kennt sich damit jemand aus?

...zur Frage

Wie kann ich eine HTML und JavaScript Login-Funktion mit nur einer Passwortmöglichkeit machen?

Ich will eine Login-Funktion für eine eigene Internetseite machen, wobei nur mein eigenes Passwort funktionieren soll. Es kommt aber immer die Meldung, dass das Passwort falsch sei.

Das ist mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Seitenname | Login</title>
    <meta charset ="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header><img src="bilder/Logo.jpg" alt="Logo"></header>
      <sectionAnmeldung>
        <div class="Anmelden">
          <h1>Anmelden</h1>
          <a>Passwort:</a>
          <input type="password" name="myPw" placeholder="Password" />
          <script>
            function pwRichtig() {
              var x = document.getElementsByName("myPw").value;
              var pw = "password123";

              if (x == pw) {
                document.open("hauptseite.html");
              }
              else {
                alert("Falsches Passwort!");
              }
            }
          </script>
          <input type="submit" name="" value="Einloggen" onclick="pwRichtig()" required />
        </div>
      </sectionAnmeldung>
    </div>
  </body>
</html>

...zur Frage

Warum funktioniert dieser PHP-Code nicht?

Es wird gesagt, dass es einen Fehler in Zeile 17, 18 und 19 gibt. Also ab

$name = $_POST['Name'];

Ich finde den Fehler dazu aber nicht. dieser Code ist dazu da, einen neuen Benutzer in eine Datenbank zu speichern.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <form method="post">
      <input type="Text" id="Name" placeholder="Name"><br><br>
      <input type="Text" id="Vorname" placeholder="Vorname"><br><br>
      <input type="number" id="Telefonnummer" placeholder="Telefonnummer"><br><br>
      <input type="submit">
    </form>
    <?php
      $name = $_POST['Name'];
      $Vorname = $_POST['Vorname'];
      $Telefonnummer = $_POST['Telefonnummer'];
      require "./Config.php";
      $pdo;
      $sql = "INSERT INTO user (Name, Vorname, Telefonnummer) VALUES (:Name, :Vorname, :Telefonnummer)";
      $stmt = $pdo -> prepare($sql);
      $stmt -> execute(['name' => $name, 'Vorname', $Vorname, 'Telefonnummer', $Telefonnummer]);
    ?>
  </body>
</html>

...zur Frage

HTML Form auswerten und neue Füllen?

Hey!

Ich habe folgende Input form:

        <form action="/calculate" method="GET">
            <br><label for="KM_cost_truck_a">KM cost truck a</label>
            <input required placeholder="10" ype="text" id="KM_cost_truck_a" name="KM_cost_truck_a"><br>
    
            <label for="KM_cost_truck_b">KM cost truck b</label>
            <input required placeholder="9" type="text" id="KM_cost_truck_b" name="KM_cost_truck_b"><br>
    
            <label for="Product_cost_a">Product cost a</label>
            <input required placeholder="7" type="text" id="Product_cost_a" name="Product_cost_a"><br>
    
            <label for="Product_cost_b">Product cost b</label>
            <input required placeholder="11" type="text" id="Product_cost_b" name="Product_cost_b"><br>
    
            <label for="Source_a_location">Source a location</label>
            <input required placeholder="Berlin" type="text" id="Source_a_location" name="Source_a_location"><br>
    
            <label for="Source_b_location">Source b location</label>
            <input required placeholder="Paris" type="text" id="Source_b_location" name="Source_b_location"><br>
    
            <label for="Truck_a_capacity">Source a capacity</label>
            <input required placeholder="5" type="text" id="Truck_a_capacity" name="Truck_a_capacity"><br>
    
            <label for="Truck_b_capacity">Source b capacity</label>
            <input required placeholder="3" type="text" id="Truck_b_capacity" name="Truck_b_capacity"><br>


            <button type="submit" id="calcbtn" value="Submit">Calculate</button>
        </form>

Die eine Anfrage an meinen Server schickt und die ergebnisse dann auf eine neue Seite kommen. (Man wirt weitergeleitet)

Wie kann ich eine neue form mit der Antwort vom server füllen?

...zur Frage

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

HTML / JS: Wie kann ich mehrere Sachen aus dem localStorage ausgeben?

Hallo,

ich habe vor, eine Benutzerverwaltungssoftware zu programmieren. Jedoch bin ich auf ein Problem gestoßen.

Bei der unteren Artikelnummer kann man eine Art Schlüssel eingeben, welcher aber nicht gleich wie die Artikelnummer sein muss.

z.b. so..

Wenn man dann auf Suchen klickt und die Artikelnummer 01 eingibt, sollte es mir alles ausgeben. Das heißt, die Artikelnummer, Beschreibung, den Lagerplatz, usw..

Das habe ich bis jetzt alles:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Alle Artikel</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>Artikel Nr.</td>
        <td>Beschreibung</td>
        <td>Lagerplatz</td>
        <td>Bestand</td>
        <td>Preis</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="Artikel" value="" type="text" />
        </th>
        <th>
          <input id="Beschreibung" value="" type="text" />
        </th>
        <th>
          <input id="Lagerplatz" value="" type="text" />
        </th>
        <th>
          <input id="Bestand" value="" type="text" />
        </th>
        <th>
          <input id="Preis" value="" type="text" />
        </th>
      </tr>
    </tbody>
  </table>
  Artikel Nr.: <input id="Schlüssel" value="" type="text" />
  <input type="button" value="speichern" onclick="speichern()" />
  <input type="button" value="Artikel suchen" onclick="suche()" />
</body>
</html>
<script>
  function speichern() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    var Artikel = document.getElementById('Artikel').value;
    var Beschreibung = document.getElementById('Beschreibung').value;
    var Lagerplatz = document.getElementById('Lagerplatz').value;
    var Bestand = document.getElementById('Bestand').value;
    var Preis = document.getElementById('Preis').value;

    window.localStorage.setItem(Schlüssel, Artikel, Beschreibung, Lagerplatz, Bestand, Preis);
  }

  function suche() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    document.getElementById('Artikel').value = window.localStorage.getItem(Schlüssel);
  }
</script>

Ich danke für eure Hilfe.

Gruß

...zur Frage

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen