CSS und Javascript - bewertung mit Sternen

[Happynils]

Zuerstmal, ich kann überhaupt kein Javascript.
eigentlich sollte, wenn man auf den 5ten Stern klickt, alle anderen sterne auch gelb werden. Wenn man auf den zweiten Stern klickt, nur die ersten zwei gelb werden. Ich denke einige haben so etwas schon mal gesehen :)
Ich habe das script hier im Internet gefunden und frage mich nun warum es nicht funktioniert...Ohne mausover sind alle Sterne grau!

  
.stern1, .stern2, .stern3, .stern4, .stern5 {  
	display: inline-block;  
	width: 20px;  
	height: 20px;  
	background: url(images/sterngrau.png);  
}  
  
.stern1:hover, .stern2:hover, .stern3:hover, .stern4:hover, .stern5:hover {  
	background: url(images/stern.png);  
}  
  
.sterne1 .stern1 {  
	background: url(images/stern.png);  
}  
  
.sterne2 .stern1, .sterne2 .stern2 {  
	background: url(images/stern.png);  
}  
  
.sterne3 .stern1, .sterne3 .stern2, .sterne3 .stern3 {  
	background: url(images/stern.png);  
}  
  
.sterne4 .stern1, .sterne4 .stern2, .sterne4 .stern3, .sterne4 .stern4 {  
	background: url(images/stern.png);  
}  
  
.sterne5 .stern1, .sterne5 .stern2, .sterne5 .stern3, .sterne5 .stern4, .sterne5 .stern5 {  
	background: url(images/stern.png);  
}  

  
<div class='sterne0'>  
	<span class='stern1' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern2' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern3' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern4' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern5' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
</div>  

Frage: Warum funkt es nicht?