Zwei Syntax-Fragen / Formulare

[tj]

Hallo ihr,

ich beginne mich gerade in Javascript zurechtzufinden.

Dazu habe ich zwei Fragen. Würde mich sehr freuen, wenn ihr mir weiterhelfen könntet:

Frage 1: Warum wird im untenstehenden Code nicht bei Klick auf den Button die Hintergrundfarbe anhand der Eingabe des Users verändert? Wo liegt der Fehler?

  
<script type="text/javascript">  
function farbeAendern()  
{  
f = document.getElementById('farbe').value;  
document.style.backgroundColor = f;  
  
}  
</script>  
  
  
<form>  
<input type="text" name="farbe" id="farbe"/>  
<input type="button" value="OK" onclick="farbeAendern()"/>  
</form>  
  

Frage 2:
Ich will einen einfachen Rechner verwirklichen mit zwei Formularen und einer simplen Addition. Javascript behandelt meine Variablen allerdings als Text und gibt bei 2+2 22 aus statt 4. Welchen (hoffentlich einfachen Trick) gibt es dabei?

  
<script type="text/javascript">  
function addieren()  
{  
z1 = document.getElementById('zahl1').value;  
z2 = document.getElementById('zahl2').value;  
erg=z1+z2;  
alert(erg);  
  
}  
</script>  
<form>  
<input type="number" name="zahl1" id="zahl1"/>  
<input type="number" name="zahl2" id="zahl2"/>  
<input type="button" value="Rechnen" onclick="addieren()"/>  
</form>  

Vielen Dank für eure Hilfe.
tj

[cr0$$]

Hi tj,

zu Deiner ersten Frage:

Frage 1: Warum wird im untenstehenden Code nicht bei Klick auf den Button die Hintergrundfarbe anhand der Eingabe des Users verändert? »»

[...]

f = document.getElementById('farbe').value;
document.style.backgroundColor = f;

[...]

Lösung: document.body.style.backgroundColor = f;

Du kannst dem Objekt document keine Style-Attribute zuweisen.
Dem body einer Seite jedoch schon.
Bei einer Fehleingabe in Deinem Formular wird meine o.g. Lösung dann auch nicht mehr helfen.

Frage 2:
Ich will einen einfachen Rechner verwirklichen mit zwei Formularen und einer simplen Addition. Javascript behandelt meine Variablen allerdings als Text und gibt bei 2+2 22 aus statt 4. Welchen (hoffentlich einfachen Trick) gibt es dabei?

function addieren()
{
z1 = document.getElementById('zahl1').value;
z2 = document.getElementById('zahl2').value;
erg=z1+z2;
alert(erg);
}

Lösung:
z1 = parseInt( document.getElementById('zahl1').value, 10 );
z2 = parseInt( document.getElementById('zahl2').value, 10 );

Deine Vermutung war richtig. Deine z-Vars sind vom Typ String.
In Javascript ist die Operation '+' gleichzeitig auch ein
Verkettungsoperator. Ergo werden die beiden String z1 und z2 miteinander
verbunden.
Abhilfe schafft hier eine Typumwandlung (type-casting) zu einem
Integer. In Javascript geht das mit der Funktion "parseInt( param1, param2 )"

param1 ist dabei due zu konvertierende Variable.
param2 ist die Basis des Zahlensystems (10=Dezimal).

Ich hoffe ich konnte Dir damit weiterhelfen.

-------------------------------------------------------------
 - ATECore v1.0 (OSource) - 2012 - cr0$$

[tj]

Hey cr0$$,

wow, vielen Dank für die schnelle und hilfreiche Antwort. So funktioniert das jetzt alles.

Noch eine Frage: Kann ich diesen parseInt-Schritt auch irgendwie umgehen, indem ich den Variablen irgendwie davor schon sage, dass sie eigentlich int-Variablen sein sollen?

Danke und Gruß
tj

[molily]

Hallo!

Noch eine Frage: Kann ich diesen parseInt-Schritt auch irgendwie umgehen, indem ich den Variablen irgendwie davor schon sage, dass sie eigentlich int-Variablen sein sollen?

Nein. Das ist bereits die bevorzugte Methode, um ihnen zu sagen, dass sie eigentlich Integer-Variablen sein sollen.

Mathias