Wie kann ich in JavaScript Werte zusammenrechnen und dann ausgeben?

Hi Leute,

ich habe ein Summe-Feld indem ein Preis angezeigt werden soll.

<input type="text" style="background-color: #fff" class="form-control" id="Summe" placeholder="0" readonly>

Dann habe ich noch eine Funktion die drei Werte mitliefert: Die ID des Produkts (identisch mit der ID in HTML), dann die Menge des Produkts und zum Schluss noch den Preis.

Diese Funktion wird per + und - Buttons aufgerufen. Für jedes Produkt gibt es auch eine Art Counter, auf dem angezeigt wird, wie viele man kauft.

Bis hierhin funktioniert alles. Das was nicht funktioniert, ist der Preis der auf das Feld addiert werden soll. Im Script habe ich es hiermit versucht, allerdings steht im Summe-Feld dann immer NaN (Not a Number). Aber wie bekomm ich das richtig?

zahl1 = parseFloat(document.getElementById('Summe').value);
zahl2 = parseFloat(price);
document.getElementById('Summe').value = zahl1 + zahl2;

Ich muss parseFloat benutzen, denn Preise enthalten selbstverständlich auch Kommas :)

Bitte helft mir! Danke! LG

4 Antworten

ceevee

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

20.10.2016, 15:08

Ich würde mir erstmal ausgeben lassen, was in zahl1 und zahl2 drinsteht, also ob das schon wirklich Zahlen sind. Das geht mit der Anweisung

console.log(zahl1, zahl2);

am besten. Die Werte erscheinen dann in der Browserkonsole. Alternativ

alert(zahl1);

alert(zahl2);

Vielleicht siehst du dann schon, welche der beiden Zahlen nicht erkannt wird.

Mal ins Blaue geraten: Gibst du die Zahlen in dem Format "123,45" (also mit dem Komma) ein? Das ist falsch, richtig wäre "123.45" (also mit Punkt).

MinecrafterPG

Fragesteller

20.10.2016, 15:17

Das mit dem Punkt undso ist mir alles klar, ich habe auch schon in der Konsole ein bisschen probiert, jetzt funktionierts. Ich weiß nicht warum, aber es geht :)

mm78pr

20.10.2016, 15:11

Wenn NaN zurückgegeben wird und keine Zahl bzw eine Summe dann wird vermutlich die Variablen zahl2 keine Zahl beinhalten.
Ich würde mir mit console.log(zahl2) in der Konsole den Wert ausgeben.
Zusätzlich würde ich die Berechnung nicht erst bei der Zuweisung machen sondern immer trennen. also summe = zahl1 + zahl2; und dann .....value = summe;

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

20.10.2016, 15:16

also werte mit kommas werden sowieso abgeschnitten von parsefloat , wert mit punkt funktionieren .

zweitens , willst du den wert aus Summe und dann ihn in Summe schreiben .

Ich sehe aber gar keinen Wert bei Summe , also wird nichts mit price (der auch nirgends zu sehen ist) versucht zu addieren, was dann NaN ergibt .

machst du das in zwei felder ergibt das das gewüschte ergebnis .

https://jsfiddle.net/x0sjnuqr/

Kieselsaeure

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

20.10.2016, 17:18

Darfst kein komma verwenden sondern nur punkt

Ähnliche Fragen

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 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?

...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

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

Php Primzahlbestimmung?

Hey,

das wird fürs erste wahrscheinlich meine letzte frage zu php sein. Und zwar fehlt mir noch die Primzahlbestimmung. Ich hab es schonmal gefragt, jedoch hat es bisher noch nicht funktioniert.

<html>
   	<?php
		$zahl1 = $_POST["zahl1"];
		$zahl2 = $_POST["zahl2"];
		$text = $_POST["text"];
		$produkt = $zahl1*$zahl2;
         $feld=array();

		
		if($zahl1 < $zahl2) {
			echo "Zahlen: $zahl1 und $zahl2 <br>";
        for ($i=$zahl1; $i<=$zahl2;$i++)
		 {$feld[]=$i;}
	 
			foreach($feld as $zahl) {
				
				
				if($zahl % 2 == 0) {
					echo"<font color='red'>{$zahl}</font>";					
				}								
				else {
					echo"<font color='blue'>{$zahl}</font>";
				}
			}
			echo "<br> Produkt: $produkt <br> Zeichenkette: $text  ";
			echo  strlen($text);
		}
		if($zahl2 < $zahl1) {
			echo "Zahlen: $zahl2 und $zahl1 <br>";
		 for ($i=$zahl2; $i<=$zahl1;$i++)
		 {$feld[]=$i;}	
			
			foreach($feld as $zahl) {
				
				
				if($zahl % 2 == 0) {
					echo"<font color='red'>{$zahl}</font>";
				}
				else {
					echo"<font color='blue'>{$zahl}</font>";
				}
			}
			echo "<br> Produkt: $produkt <br> Zeichenkette: $text  ";
			echo  strlen($text);
		}


	?>
</html>

Das ist mein code bisher und es funktioniert auch alles, bis auf die primzahlen. Wäre sehr nett

...zur Frage

Javascript - getElementById funktioniert nicht?

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

input type=range Veränderung wird nicht angezeigt?

Habe ca. 2 Std. den Fehler gesucht und nicht gefunden. Ich möchte den Wert eines Schiebereglers anzeigen, aber die Anzeige ändert sich nicht. Wenn ich das Formular abschicke, ist der Wert geändert. Nur die Anzeige während des Schiebens will nicht

Code:

    <style>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#KM_input').addEventListener('input', setKM);
});
function setKM() {
  document.getElementById("KM_output").innerHTML = document.getElementById("KM_input").value;
}
    </style>

<p>km radius:
<input type="range" id="KM_input" name="KM" title="KM" min="0" max="100" value="5" step="5"> <output id="KM_output">5</output></p>

Was ist falsch?

...zur Frage

Browserfehler: "0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference"?

Hallo,

ich habe eine Aufgabe gemacht und mein Browser gibt diesen Fehler aus:

0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference

Ich glaube aber, dass die Aufgabe richtig ist!

Ich habe es auch einen Freund geschickt und bei ihm funktioniert es ebenfalls nicht.

HTML:

<!DOCTYPE html>
<html>
  <head lang="de">
    <meta charset="UTF-8" />
    <style type="text/css"></style>
    <title>Lieblings Professor</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Notenberechnung<br>Teilaufgaben</legend>

        <label for="aufgabe1">Aufgabe 1:</label>
        <input type="number" name="Augabe1" id="a">
        <br><br>

        <label for="aufgabe2">Aufgabe 2:</label>
        <input type="text" name="Aufgabe2" id="b">
        <br><br>

        <label for="aufgabe3">Aufgabe 3:</label>
        <input type="number" name="Augabe3" id="c">
        <br><br>

        <label for="aufgabe4">Aufgabe 4:</label>
        <input type= "number" name="Augabe4" id="d">
        <br><br>

        <button id="069" value="069">druck berechne</button>
      </fieldset>
    </form>
    <h1>Note</h1>
    <div id="note"></div>
    <script src="x1.js"></script>
  </body>
</html>
</form>
<h1>Note</h1>
<div id="note"></div>
<script src="x1.js"></script>
</body>
</html>

JavaScript:

"use strict"

window.addEventListener("load", init);

function init() {
  console.log("Fenster ist geladen");
  let btn = document.getElementById("069");
  btn.addEventListener("click", btnfk);

  function btnfk() {
    console.log("ich wurde geklickt!!!!");

    let aufgabe1 = document.getElementById("a").value;
    console.log(aufgabe1);
    let aufgabe2 = document.getElementById("b").value;
    console.log(aufgabe2);
    let aufgabe3 = document.getElementById("c").value;
    console.log(aufgabe3);
    let aufgabe4 = document.getElementById("d").value;
    console.log(aufgabe4);

    aufgabe1 = Number(aufgabe1);
    aufgabe2 = Number(aufgabe2);
    aufgabe3 = Number(aufgabe3);
    aufgabe4 = Number(aufgabe4);

    let note = document.getElementById("note");
    global = global + aufgabe1 + aufgabe2 + aufgabe3 + aufgabe4;

    note.textContent = global;
    let note5 = document.createElement("div");
    document.body.appendChild(note5);

    if (global < 12) {
      note5.textContent = "Ihre Note ist 5!!!!!";
    }

    if (global >= 12 && global <= 15) {
      note5.textContent = "Ihre Note ist 4 ...";
    }

    if (global >= 15 && global <= 18) {
      note5.textContent = "Ihre Note ist 3";
    }

    if (global >= 18 && global <= 21) {
      note5.textContent = "Ihre Note ist 2 super";
    }

    if (global >= 21) {
      note5.textContent = "Ihre Note ist 1 WOW";
    }
  }
}

let global = 0;

Wenn ich statt Zahlen aber Buchstaben eingebe, werden sie gespeichert. Ansonsten mit Zahlen werden sie nicht gespeichert und verschwindet sofort.

...zur Frage

Taschenrechner programmieren mit C# der die Eingabe aus einer Zeile lesen kann?

Ich habe im Moment einen der nur in dieser Art funktioniert :

Also ein normaler Consolen Taschenrechner, aber ich brauche einen der so Rechnen kann: 5+5 10 also in einer Zeile. Ich krieg es nicht gebacken, mein Code:

using System;
namespace ConsoleApplication2 { public enum Rechenoperation { Minus,Plus,Division,Multiplikation, Unbekannt } internal class Program { public static void Main(string[] args) { var zahl1 = AskZahl(); var rechenoperation = AskforRechenoperation(); var zahl2 = AskZahl(); int? ergebnis = null; switch (rechenoperation) { case Rechenoperation.Minus: ergebnis = zahl1.Value - zahl2.Value; break; case Rechenoperation.Plus: ergebnis = zahl1.Value + zahl2.Value; break; case Rechenoperation.Division: ergebnis = zahl1.Value / zahl2.Value; break; case Rechenoperation.Multiplikation: ergebnis = zahl1.Value * zahl2.Value; break; case Rechenoperation.Unbekannt: break; default: throw new ArgumentOutOfRangeException(); }Console.Out.WriteLine(ergebnis); Console.ReadKey(); }
    private static Rechenoperation AskforRechenoperation()
    {
        Console.WriteLine("");
        var eingabe = Console.ReadLine();
        if (eingabe.Contains("-"))
        {
            return Rechenoperation.Minus;
        }
        if (eingabe.Contains("*"))
        {
            return Rechenoperation.Multiplikation;
        }
        if (eingabe.Contains("+"))
        {
            return Rechenoperation.Plus;
        }
        if (eingabe.Contains("/"))
        {
            return Rechenoperation.Division;
        }

        return Rechenoperation.Unbekannt;
    }
    private static int? AskZahl2()
    {
        Console.WriteLine("");
        var eingabe = Console.ReadLine();
        if (int.TryParse(eingabe,out var zahl))
        {
            return zahl;
        }

        return null;
    }

}

...zur Frage

JavaScript: Schachbrett Schleifen?

Leute, bitte, ich brauche Hilfe, wer programmieren kann.

Ich habe es versucht, aber keine Ahnung warum, es funktioniert nicht.

Ich wäre sehr dankbar, wenn ich Tipps oder so hier bekommen würde.

Was fehlt? Was ist falsch?

JavaScript:

"use strict";

window.addEventListener("load", init);

let i;
let t;
let tr;
let td;

function init() {
  console.log("Fenster ist geladen");

  let btn = document.getElementById("btn");
  btn.addEventListener("click", btn_angeklickt);
}

function btn_angeklickt() {
  console.log("btn angecklickt");

  let zeilen = document.getElementById("zeilen").value;
  console.log(zeilen);

  let spalten = document.getElementById("spalten").value;
  console.log(spalten);

  let table = document.getElementById("bratan");
  
  for (i = 0; i < spalten.value; i++);
  {
    tr = document.createElement("tr");
    table.appendChild(tr);

    for (t = 0; t < zeilen.value; t++);
    {
      td = document.createElement("td");

      if (i % 2 == t % 2) {
        td.style.backgroundColor = colors[0];
        td.style.height = "60px";
        td.style.width = "60px";
      }
      else {
        td.style.backgroundColor = colors[1];
        td.style.height = "60px";
        td.style.width = "60px";
      }
    }
  }

  tr.appendChild(td);
}

let colors = ["#044272", "#80AB52"];

HTML:

  <label for="Anzahl">Zeilen</label>
  <input type="number" id="zeilen">
  <br><br>
  <label for="Anzahl">Spalten</label>
  <input type="number" id="spalten">
</form>
<br>
<button type="button" id="btn" value="btn">erstelle Schachbrett</button>
<table id="bratan"></table>

...zur Frage

Mittelwert berechnen aus zahlen in einer Textdatei unter linux?

Mit welchem Linux Script kann man den Mittelwert der zahlen berechnen einer Datei?
BSP:

NR Zahl1 Zahl2 Zahl3

12349 Zahl1 Zahl2 Zahl3 ...

Es steht in jeder zeile die Nummer der Wetterstation und dahinter 12 Werte

Jetzt möchte ich aus alles werten (außer Wetterstationsnummer) den Mittelwert bilden für ein Jahresmittelwert.

...zur Frage

Aufgabe: Minimum ermitteln?

Hallo Leute, könnt ihr mal kurz kontrollieren ob ich die folgende Aufgabe richtig gemacht habe?

/*
Aufgabe 1: Minimum ermitteln
Gegeben sind drei String Variablen mit beliebigen ganzzahligen Werten (als Strings!), z.B. "23", "5","13".
Wandeln Sie die Strings in Integer-Werte um und ermitteln Sie das Minimum und Maximum der drei Zahlen.
Geben Sie die drei Zahlen und das Minimum/Maximum auf der Konsole aus.

Das Minimum von 23, 5 und 13 ist 5.
Das Maximum von 23, 5 und 13 ist 23.
*/

String zahl1 = "23";
String zahl2 = "5";
String zahl3 = "13";

boolean minimum = Integer.parseInt(zahl2) < Integer.parseInt(zahl1) && Integer.parseInt(zahl2) < Integer.parseInt(zahl3);
System.out.println(minimum);

boolean maximum = Integer.parseInt(zahl1) > Integer.parseInt(zahl2) && Integer.parseInt(zahl1) > Integer.parseInt(zahl3);
System.out.println(maximum);

//true
//true

...zur Frage

Wie update ich den HTML Text?

Ich bin in der Programmier AG meiner Schule und soll es jetzt so machen, dass der Fehler Text sobald ich einen Fehler mache geupdated wird und die Anzahl der Fehler aktuell ist. Gerade aktualisiert es nur wenn ich etwas richtiges eingebe.

Der Code lautet wie folgt:

<html>
<head>
<meta charset="utf-8">
<title>Kopfrechnen-Quiz</title>
<script>
var richtigeAntwort;
var aktuelleNummer = 1;
var Anzahlfalsch = 0;
function wennGeladen() {
stelleAufgabe();
aktuelleNummer = 1;
//alert(Math.floor( Math.random() * 100 ));
Anzahlfalsch = 0;
}
function pruefeAntwort() {
event.preventDefault();
if (document.getElementById("antwort").value == richtigeAntwort) { 
alert("Richtig!");
aktuelleNummer++;
stelleAufgabe();
}
else {
alert ("Leider falsch. Bitte nochmal versuchen");
refresh ("falsch")
Anzahlfalsch++;
}
}
function stelleAufgabe() {
var zahl1 = Math.floor(Math.random()*100);
var zahl2 = Math.floor(Math.random()*100);
richtigeAntwort = zahl1 + zahl2;
document.getElementById("falsch").innerHTML = "Anzahl der Fehler: " + Anzahlfalsch;
document.getElementById("nummer").innerHTML = "Aufgabe Nummer: " + aktuelleNummer;
document.getElementById("aufgabe").innerHTML = zahl1 + "+" + zahl2 + ":";
}
</script>
</head>
<body onload="wennGeladen()">
<h1>Kopfrechnen-Quiz</h1>
<h2 id="nummer"></h2>
<h3 id="falsch"></h3>
Bitte berechne: <span id="aufgabe"></span>
<form onSubmit="pruefeAntwort()">
<input id="antwort">
</form>
</body>
</html>

es wäre nett, wenn mir jemand helfen könnte.

...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

Was möchtest Du wissen?

Deine Frage stellen