✔ switch mit buttons

P

prinzessin4444

Mitglied
hallo!
ich möchte die hintergrund farbe eines formularfeldes ändern durch klicken auf einen button ändert sich erst in eine farbe durch einen zweiten klick wieder in eine andere und so weiter nur ich will das mit switch machen wie geht das.

HTML: 
<html>
	<head>  
		<title></title>
		<script type="text/javascript">

			
			var farbe=document.formular.eingabe;

			function farbwechsel(farbe){
			switch (farbe) {
				case "1":
				document.formular.eingabe.style.background='blue';
				break;
				case "2":
				document.formular.eingabe.style.background='red'; 
   				break;
  				case "3":
				document.formular.eingabe.style.background='green';
				break;
  				default:
				break;
			}}
		</script>
	</head>
	<body>
		<form name="formular">
			<input type="text" name="eingabe" size="40">
			<input type="button" value="blau" onClick="switch(farbe)"/>
		</form>
	</body>
</html>
 
mit dem folgenden Beispiel wechselt die Farbe bei jedem Klick auf den Button nach einem festen Muster (Random wäre auch noch denkbar, je nachdem was du erreichen willst). Ein switch wäre an dieser Stelle die falsche Wahl.

Code: 
<html>
	<head>  
		<title></title>
		<script type="text/javascript">

			
			var inputField = document.formular.eingabe;
                        var colors = ["blue","red","green"];
                        var colorPointer = 0;

			function changeColor() 
                        {
                          if (colorPointer >= colors.length)
                          {
                            colorPointer = 0;
                          }
			  inputField.style.background = colors[colorPointer++];
			}
		</script>
	</head>
	<body>
		<form name="formular">
			<input type="text" name="eingabe" size="40">
			<input type="button" value="blau" onClick="changeColor();"/>
		</form>
	</body>
</html>
 
Hier mal ne andere Variante:
HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2008-11-01"  />
<title>Test</title>
<script type="text/javascript">
function changeColor(o,c) 
{
  try{c=o.getAttribute('colors').split(',')}catch(e){}
  o.style.backgroundColor = c.shift();
  c.push(o.style.backgroundColor);
  o.setAttribute('colors',c.toString());
}
</script>
</head>
<body>
  <form name="formular">
    <input type="text" name="eingabe" size="40">
    <input type="button" value="blau" 
           onClick="changeColor(this.form.eingabe,['red','blue','green']);"/>
  </form>
</body>
</body>
</html>

die Funktion erwartet als Parameter:
1.Das zu manipulierende Objekt
2.einen Array mit den Farben

...so kannst du diese Funktion mit diversen Farben auf verschiedene Elemente anwenden :)

Das Beispiel vom Lord geht aber auch, du musst nur diese Zeile:
Code: 
var inputField = document.formular.eingabe;
...in die Funktion selbst verschieben, denn dort, wo sie jetzt steht, ist dies Element dem Browser noch nicht bekannt :)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück