[Javascript] Bild bei Klick wechseln

**Comu** · 29.11.2012, 22:51

Würde dir raten, ebenfalls wie 3lit, ein Framework (vorzugweise jQuery) zu nutzen. Ganz einfach: Jeder der heutzutage in irgendeiner Weise JavaScript programmiert, nutzt eins. Sei es nun Node.JS, jQuery oder eine Game Engine - keiner nutzt mehr das native, da es einfach zu umständlich ist, viele Sachen umzusetzen.

**Saad** · 29.11.2012, 22:52

Ja, aber ich bin gerade mehr oder weniger ein Noob in Sachen JavaScrippt, HTML und in der Schule machen wir das auch derweil so :b

**DMW007** · 29.11.2012, 22:57

Um was für ein HTML-Element handelt es sich bei suchField? Das Attribut value haben nur Eingabeelemente wie zb <input>.
Div-Container haben es nicht, da musst du innerHTML nehmen.

Zu deinem Code:
Sicher ließe sich das über switch lösen, wäre aber redundant ohne Ende.
Geht wesentlich einfacher:

Code:

    var num = document.getElementById('suchFeld').value;
    var element = document.getElementById('kal' + num);
    if(element != null) {
        element.style.border = '5px solid blue';
    }else {
        alert('Ungültige Eingabe!');
    }

Ein Framework brauchst du für die Kleinigkeiten nicht, das ist Unsinn.
Ich würde erst eines einsetzen wenn es eine nennenswerten Vorteil bringt, z.B. bei Animationen.
In dem Codebeispiel bringt dir ein Framework keinen nennenswerten vorteil.

Wenn du nativ arbeitest würde ich mir aber die Funktion $ kurz selbst definieren. Spart einiges an Tipparbeit da man nicht immer document.getElementByID ausschreiben muss.

**Comu** · 29.11.2012, 23:02

Eben wenn man auf dem DOM-Baum rumkrazt bringen die heutigen Frameworks einige Vorteile, alleine schon das sie in vordefinierte Objekte gepackt werden - man also jedes Element gleich behandeln kann. Dein vorhaben könnte man also verständlich (mit allem drum und dran, ohne submit button, in folgenden Code packen

Code:

// Sobald das Dokument fertig geladen hat, führe die Funktion aus (also alle Elemente bereitstehen!)
$(document).ready(function(){
	
	// Sobald sich die Eingabe im Feld ändert, soll er die angegebene Funktion ausführen
	$('#id').on('change',function(){
		
		// Da wir gesagt haben das mit dem klick auf #id ein Event ausgelöst wird und der in die Funktion springt
		// können wir mit $(this) das value des Feldes (optional auch mit $('#id') abfragen!)
		var id = $(this).val();
		
		// Dann weisen wir allen Boxen keinen Rand zu
		$('.box').css('border','0px');
		
		// und der Box mit der dementsprechenden id nun den Rand
		$('#' + ).css('border','1px solid #000');
	});
});

Vollständigskeitshalber und zum verstehen, hier noch einmal das komplette Dokument:

HTML-Code:

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Div-Selector</title>
		<meta charset="utf-8">
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script>	
		// Sobald das Dokument fertig geladen hat, führe die Funktion aus (also alle Elemente bereitstehen!)
		$(document).ready(function(){
			
			// Sobald sich die Eingabe im Feld ändert, soll er die angegebene Funktion ausführen
			$('#id').on('change',function(){
				
				// Da wir gesagt haben das mit dem klick auf #id ein Event ausgelöst wird und der in die Funktion springt
				// können wir mit $(this) das value des Feldes (optional auch mit $('#id') abfragen!)
				var id = $(this).val();
				
				// Dann weisen wir allen Boxen keinen Rand zu
				$('.box').css('border','0px');
				
				// und der Box mit der dementsprechenden id nun den Rand
				$('#' + ).css('border','1px solid #000');
			});
		});
		</script>
		<style>
		.box {
			width: 150px;
			height: 150px;
			background: green;
			margin-top: 10px;
		}
		</style>
	</head>
	<body>
		<input type="text" id="id">
		
		<div class="box" id="1"></div>
		<div class="box" id="2"></div>
		<div class="box" id="3"></div>
		<div class="box" id="4"></div>
		<div class="box" id="5"></div>
	</body>
</html>

**Saad** · 29.11.2012, 23:02

Ja bei suchFeld handelt es sich um ein <input> Tag

Das einzige Problem ist jetzt halt, dass ich jetzt nicht weiß, wie ich eben diesen Value aus dem Tetxfeld (<input>) in eine var speichere, damit ich eben diese switch-anweisung durchführe :b
Weil, wenn ich es dann ausführe und ne' Zahl eingebe, wird immer nur der default-zweig ausgeführt. :p

U-Labs

Account-Boerse

U-IMG

Thema: [Javascript] Bild bei Klick wechseln

AW: [Javascript] Bild bei Klick wechseln

The Following User Says Thank You to Comu For This Useful Post:

AW: [Javascript] Bild bei Klick wechseln

AW: [Javascript] Bild bei Klick wechseln

The Following User Says Thank You to DMW007 For This Useful Post:

AW: [Javascript] Bild bei Klick wechseln

The Following User Says Thank You to Comu For This Useful Post:

AW: [Javascript] Bild bei Klick wechseln

Ähnliche Themen

IP wechseln

Apple-ID wechseln

Uploadbox Javascript?

Get Request - Javascript

Fahrschule wechseln ?