Werte auslesen und automatisch hinzufügen

[TheSoulrester]

Ich würde gerne ein Input type="number" Feld nach Werteeingabe auslesen, und anschließend den Wert zusammen mit dem Schriftzug "in Minuten" im Feld ausgeben.

d.H. ich schreibe in das Feld die Zahl 2, nach dem eingeben steht aber im Feld "2 in Minuten".

leider funktioniert mein bisheriger Code nicht, denn wenn ich einen Wert eingebe, wird dieser automatisch "gelöscht"

<input type="number" id="Dayark" name="Werteingabe" value="" onblur="addwert()">

function addwert() {
	var adding = "in Minuten";
	var wert = document.getElementById("Dayark").value + adding;
				
	document.getElementById("Dayark").value = wert;
}

eigentlich habe ich es ja so deklariert: beim verlassen des Feldes wird der Inhalt als variable abgespeichert, zu dieser Variable kommt der Text "in Minuten" und wird anschließend in das Feld geschrieben.

[Reinhard]

Guten Abend,

leider funktioniert mein bisheriger Code nicht, denn wenn ich einen Wert eingebe, wird dieser automatisch "gelöscht"

<input type="number" id="Dayark" name="Werteingabe" value="" onblur="addwert()">

function addwert() {
	var adding = "in Minuten";
	var wert = document.getElementById("Dayark").value + adding;
				
	document.getElementById("Dayark").value = wert;
}

So wie es aussieht, liegt es daran, dass du input type="number" verwendest. Es scheint da Schwierigkeiten zu geben, wenn du es mit Text befüllen willst. Entferne mal das Event vom input und gib dort dann einen Buchstaben ein und klick auf einen Bereich außerhalb des input. Bei mir (FF 37) bekommt das input einen roten Rand.
Entweder du begnügst dich mit einem type="text" oder du setzt ein span dahinter mit dem Inhalt "in Minuten".

Reinhard

[TheSoulrester]

Guten Abend,

leider funktioniert mein bisheriger Code nicht, denn wenn ich einen Wert eingebe, wird dieser automatisch "gelöscht"

<input type="number" id="Dayark" name="Werteingabe" value="" onblur="addwert()">

function addwert() {
	var adding = "in Minuten";
	var wert = document.getElementById("Dayark").value + adding;
				
	document.getElementById("Dayark").value = wert;
}

So wie es aussieht, liegt es daran, dass du input type="number" verwendest. Es scheint da Schwierigkeiten zu geben, wenn du es mit Text befüllen willst. Entferne mal das Event vom input und gib dort dann einen Buchstaben ein und klick auf einen Bereich außerhalb des input. Bei mir (FF 37) bekommt das input einen roten Rand.
Entweder du begnügst dich mit einem type="text" oder du setzt ein span dahinter mit dem Inhalt "in Minuten".

Reinhard

hi, genau das hat funktioniert.

nur leider stehe ich jetzt vor einem weiteren problem...

Und zwar habe ich nun 3 Input Felder und es soll in das Feld "in minuten" stehen, welches angeklickt wurde.

habe also das ganze so definiert:

			function addwert(inputvalue) {
				var adding = " in Minuten";
				var wert = /*document.getElementById("Dayark").value*/inputvalue + adding;
				
				if (/*document.getElementById("Dayark").value*/inputvalue == '') {
					/*document.getElementById("Dayark").value*/inputvalue = '';
				}
				else {
					/*document.getElementById("Dayark").value*/inputvalue = wert;
				}
				alert(inputvalue);
			}	

			<table>
				<tr>
					<td>Gesamttagesl&auml;nge</td>
					<td><input type="text" placeholder="TEST" id="Dayark" name="Werteingabe" value="" onblur="addwert(this.value)"></td>
				</tr>
				<tr>
					<td>Nachtl&auml;nge</td>
					<td><input type="text" placeholder="TEST" id="Nightspeedark" name="Werteingabe" value="" onblur="addwert(this.value)"></td>
				</tr>
				<tr>
					<td>Tagesl&auml;nge</td>
					<td><input type="text" placeholder="TEST" id="Dayspeedark" name="Werteingabe" value="" onblur="addwert(this.value)"></td>
				</tr>
				<tr>
					<td><input type="button" onclick="rechnen()" name="Werteingabe" value="Berechnen"></td>
					<td></td>
				</tr>
			</table>

Der Inhalt wird ja schonmal richtig erkannt, (Test über Alert) jedoch übergibt das ganze Script wenn etwas drin steht diese Variable nicht mehr an das Feld weiter. Die Variable ist aber gesetzt.

Möchte ungern 3 verschiedene Funktionen bauen inder ich jede Input Feld einzeln aufrufe mit document.getElementById().value

[Reinhard]

Guten Abend,

hi, genau das hat funktioniert. nur leider stehe ich jetzt vor einem weiteren problem...
Ich möchte solch eine Funktion: Input Feld ist leer, ich gebe ein Value ein, ich klicke aus dem Feld, zu dem Value kommt ein Inhalt X (z.b. Value + Minuten) (also 7 Minuten), ich klicke erneut in das Feld und der Inhalt wird gelöscht, ich mache keine Änderung und der alte Inhalt erscheint wieder, ich klicke erneut rein und der Inhalt wird wieder gelöscht, ich mache eine Änderung, die Änderung bleibt erhalten + ein Inhalt X (z.b. Value + Minuten) (also neue Zahl 8 Minuten) mein bisheriges Script:

var safevalue;                 
function addwert(inputvalue, elementid) {
    var adding = " Minuten";
    var wert = inputvalue + adding;
    if (safevalue == wert)
      {
      document.getElementById(elementid).value = safevalue;
      }
     else
      {
      if (inputvalue == '')
        {
        inputvalue = '';
        }
       else
        {
        document.getElementById(elementid).value = wert;
        }
      }
    console.log(safevalue)
    console.log(wert)
}
function checkwert(value, elementid) {
    safevalue = value;
    document.getElementById(elementid).value = '';
}

<table>
  <tr>
    <td>Gesamttagesl&auml;nge</td>
    <td><input type="text" placeholder="TEST" id="Dayark" name="Werteingabe" value="" onblur="addwert(this.value, this.id)" onfocus="checkwert(this.value, this.id)"></td>
  </tr>
  <tr>
    <td>Nachtl&auml;nge</td>
    <td><input type="text" placeholder="TEST" id="Nightspeedark" name="Werteingabe" value="" onblur="addwert(this.value, this.id)" onfocus="this.value=''"></td>
  </tr>
  <tr>
    <td>Tagesl&auml;nge</td>
    <td><input type="text" placeholder="TEST" id="Dayspeedark" name="Werteingabe" value="" onblur="addwert(this.value, this.id)" onfocus="this.value=''"></td>
  </tr>
  <tr>
    <td><input type="button" onclick="rechnen()" name="Werteingabe" value="Berechnen"></td>
    <td></td>
  </tr>
</table>

Versuchs mal so:

var dayark = document.getElementById('Dayark'),
    nightspeedark = document.getElementById('Nightspeedark'),
    dayspeedark = document.getElementById('Dayspeedark'),
    button = document.querySelectorAll('input[type=button]')[0],
    safevalue = '';
dayark.addEventListener('blur', addwert);
dayark.addEventListener('focus', checkwert);
nightspeedark.addEventListener('blur', addwert);
nightspeedark.addEventListener('focus', function() {
    this.value = '';
});
dayspeedark.addEventListener('blur', addwert);
dayspeedark.addEventListener('focus', function() {
    this.value = '';
});
button.addEventListener('click', rechnen);
function rechnen() {}
function addwert()
{
this.value = (this.value == '') ? safevalue : this.value + ' Minuten';
}
function checkwert()
{
safevalue = this.value;
this.value = '';
}

Das Script einfach in ein document load Event packen und es sollte laufen.
Habe deine Events so übernommen, wie du sie gesetzt hast. Ich weiß zwar nicht, warum die beiden letzten Felder nicht auch die checkwert Funktion für das focus Event bekommen, aber du wirst schon wissen, was du machst.
Das weiteren kannst du diesen Umlaut-Ersetzungs-Kram getrost vergessen. Speichere einfach deine .htm(l) Datei mit UTF-8 Codierung ab und füge dem head-Bereich <meta charset="utf-8"> hinzu.
Auch die ganzen name Attribute kannst du verwerfen, wenn sie gar keinem Zweck dienen.
Auch die ganzen value = "" sind überflüssig, soweit ich weiß. Mein Firefox (V. 37) merkt sich Eingaben für Textfelder bei einem einfachen Reload. Da muss ich schon mit Javascript ran um die zu reinigen.
Und: bitte formattiere Code nach, wenn du ihn hier reinkopierst. Es erleichtert das Lesen um ein Vielfaches.

Thema "Zahl aus einem Input auslesen":

//gegeben sei ein String welcher folgendermaßen aufgebaut ist: "Zahl(en) Minuten"
//an die Nummer kommst du so:
var str = '7 Minuten',
    num = str.match(/([0-9]+) Minuten|/)[1];
if (num)
  num = Number(num);

Wenn du etwas mehr über Reguläre Ausdrücke wissen willst, hier ist ein klasse Artikel.

Reinhard

[TheSoulrester]

mit der Zahl auslesen hast du mir weitergeholfen,

mit dem anderen Script leider nicht.

Nochmals die Funktionsbeschreibung: Feld ist leer, Ich schreibe einen Wert X rein, zu dem Wert X kommt automatich ein Wert Y (z.b. X + Y) (=> 7 Minuten) ich klicke aus dem Feld, ich klicke in das Feld, das Feld wird Leer, ich schreibe nichts und klicke raus, der alte Inhalt erscheint wieder, ich klicke in das Feld und der Inhalt verschwindet wieder, ich schreibe einen neuen Inhalt X, zu dem Inhalt kommt ein Wert Y (z.b. X + Y) (=> neuer Inhalt 3 Minuten) ich klicke aus dem Feld und der neue Inhalt bleibt stehen.

nochmals mein bisheriger Code:

<table>
<tr>
<td>Gesamttagesl&auml;nge</td>
<td><input type="text" placeholder="Zeit in Minuten" id="Dayark" name="Werteingabe" onblur="addwert(this.value, this.id)" onfocus="checkwert(this.value, this.id)"></td>
</tr>
<tr>
<td>Nachtl&auml;nge</td>
<td><input type="text" placeholder="Zeit in Minuten" id="Nightspeedark" name="Werteingabe" onblur="addwert(this.value, this.id)" onfocus="this.value=''"></td>
</tr>
<tr>
<td>Tagesl&auml;nge</td>
<td><input type="text" placeholder="Zeit in Minuten" id="Dayspeedark" name="Werteingabe" onblur="addwert(this.value, this.id)" onfocus="this.value=''"></td>
</tr>
<tr>
<td><input type="button" onclick="rechnen()" name="Werteingabe" value="Berechnen"></td>
<td></td>
</tr>
</table>

var safevalue;
function addwert(inputvalue, elementid) {
var adding = " Minuten";
var wert = inputvalue + adding;
				
if (safevalue == wert) {
document.getElementById(elementid).value = safevalue;
}
else {
if (inputvalue == '') {
inputvalue = '';
}
else {
document.getElementById(elementid).value = wert;
}
}
				
console.log(safevalue)
console.log(wert)
}
function checkwert(value, elementid) {
safevalue = value;			
			
document.getElementById(elementid).value = '';
}

Nun das Problem, ich habe mir die beiden Variablen im Log anzeigen lassen, welche für mein momentanes Problem zuständig sind.

Denn wenn ich einen Wert eingebe, rausklicke, reinklicke und ohne eine änderung wieder rausklicke, sollte ja der alte Wert erscheinen. das macht es nicht, denn das Feld bleibt leer.

Nur weiß ich gerade nicht mehr, wie genau ich das beheben kann.

Hoffe jetzt hast du verstanden wo mein aktuelles Problem liegt. :)

[TheSoulrester]

hat sich erledigt.

ich habe nur im html tag vergessen, bei "onfocus" das ausführen des scriptes zu definieren :)

danke bisher für alles