Einfaches Bewertungssystem

Pho3nix

Mitglied
Hallo Leute.
Ich hab mal wieder nen kleines Problem ;) Ich bin gerade dabei ein kleines Bewertungssystem in mein Gästebuchscript zu integrieren. Da ich aber noch ganz wenig ahnung von Javascript habe, bin ich gerade ein bisschen am verzweifeln, bei meinem Problem :D

Also das Script soll ganz einfach nur 5 Sterne anzeigen und wenn man mit der Maus drüber geht, soll sich die Sternereihe soweit Füllen, wie die Maus geht. Klappen tut es soweit schon, nur leider ist ein kleines Problem da. Es sind aufeinmal 2 Sternereihen.
Ich schreib einfachmal den Code hierhin...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>5 Stars</title>
<style>
	.null{
		border-style:none;
		background-color:transparent;
		background-image:url(null.png);
		background-repeat:no-repeat;
		color:transparent;	
	}
	.eins {
		border-style:none;
		background-color:transparent;
		background-color:transparent;
		background-image:url(eins.png);
		background-repeat:no-repeat;
		color:transparent;
	}
</style>
<script type="text/javascript">
	var cs = 4;
	function Input(id){
		document.getElementById('Bewertung').innerHTML = '<form method="post">';
		for(var i = 1; i <= 5; i++){
			if(i <= id){
				document.getElementById('Bewertung').innerHTML += '<input type="submit" id="'+i+'" onmouseover="Input('+i+');" class="eins" value="'+i+'" />';
			}else{
				document.getElementById('Bewertung').innerHTML += '<input type="submit" id="'+i+'" onmouseover="Input('+i+');" class="null" value="'+i+'" />';
			}
		}
		document.getElementById('Bewertung').innerHTML += '</form>';
	}
</script>
</head>
<body>
	<p id="Bewertung">
	<form method="post">
    	<script type="text/javascript">
		for(var a = 1; a <= 5; a++){
			if(a <= cs){
				document.write('<input type="submit" id="'+a+'" onmouseover="Input('+a+');" class="eins" value="'+a+'" />');
			}else{
				document.write('<input type="submit" id="'+a+'" onmouseover="Input('+a+');" class="null" value="'+a+'" />');
			}
		}
		</script>
    </form>
    </p>
</body>
</html>
 
Hi,

ich schätze, du hast das z.B. in einem aktuellen Firefox getestet. Dort wird der Quelltext durch die Fehlerkorrektur derart modifiziert, dass er den Forderungen von HTML 4 entspricht entspricht. Diese lassen innerhalb eines p-Elements keine weiteren Blockelemente zu, und dazu gehört das form-Element.

Aus
Code:
<p>
  <form>...</form>
</p>
wird browserintern
Code:
<p></p>
<form>...</form>
Ansehen kannst du dir das z.B. im Firebug.

Der IE (zumindest vor Version 9) ist weniger fehleranfällig und führt dein Script wie gewünscht aus.


Als Lösung kannst du aus dem p-Tag ein div-Element machen.


Ciao
Quaese
 
Danke. Es funktioniert nun wie gewünst ;) Ich habe jedoch das <p> Element komplett rausgelassen und hab die ID ans Form Element weitergegeben ;)
mfg
Tobi
 

Neue Beiträge

Zurück