Zahlspiel

[Xanthos]

Hallo!!!
Ich bin neue hier und bin noch Anfänger, was Programmieren betrifft.

Habe versucht ein kleines Spiel zu basteln, was leider nicht ganz geklappt hat. Es sollen Bilder mit Zahlen per Zufall angezeigt werden. Man wählt je nach dem Bild ein zutreffendes Zahl per Radiobutton aus, wenn der Zahl mit Bild übereinstimmt, wird "Richtig" ausgegeben.

Das klappt aber nicht, Bilder werden nicht angezeigt! Bitte um Hilfe.
Hier ist mein Script

<script type="text/javascript">
var bilder = new Array(
  'bild1.png',
  'bild2.png',
  'bild3.png',
  'bild4.png',
  'bild5.png'
);
var nr = Math.floor(Math.random()*bilder.length);
document.write('<img src="'+bilder[nr]+'" alt="" />');


var bild1 = ('<img src="'+bilder[1]+'" alt="" />');
var bild2 = ('<img src="'+bilder[2]+'" alt="" />');
var bild3 = ('<img src="'+bilder[3]+'" alt="" />');
var bild4 = ('<img src="'+bilder[4]+'" alt="" />');
var bild5 = ('<img src="'+bilder[5]+'" alt="" />');

var zahl_1 = document.getElementById("input").value = "1";
var zahl_2 = document.getElementById("input").value = "2";
var zahl_3 = document.getElementById("input").value = "3";
var zahl_4 = document.getElementById("input").value = "4";
var zahl_5 = document.getElementById("input").value = "5";

function Vergleichen(
	if (bild1 && zahl_1.checked = true){
		alert('Richtig!')
	}
	else{
		alert('Falsch!!!')}
	if (bild1 && zahl_1.checked = true){
		alert('Richtig!')
	}
	else{
		alert('Falsch!!!')}
	if (bild1 && zahl_1.checked = true){
		alert('Richtig!')
	}
	else{
		alert('Falsch!!!')}
	if (bild1 && zahl_1.checked = true){
		alert('Richtig!')
	}
	else{
		alert('Falsch!!!')}
	if (bild1 && zahl_1.checked = true){
		alert('Richtig!')
	}
	else{
		alert('Falsch!!!')}
);
</script>

<img src="bild1.jpg" alt="" />
<form name="forms"> 
	<!-- HTML-Formular definieren -->

<input type=radio name="1" value="1" onClick="auswahl()">
  <!-- Punkt 1 -->
1<br>

<input type=radio name="2" value="2" onClick="auswahl()">
  <!-- Punkt 2 -->
2<br>

<input type=radio name="3" value="3" onClick="auswahl()">
  <!-- Punkt 3 -->
3<br>

<input type=radio name="4" value="4" onClick="auswahl()">
  <!-- Punkt 4 -->
4<br>

<input type=radio name="5" value="5" onClick="auswahl()">
  <!-- Punkt 4 -->
5<br>
</form>

[Christian Marquardt]

Dein Vergleich geht immer auf Bild1 und zahl_1 und das 5 mal

[Xanthos]

Danke, funktioniert trotzdem nicht

[Christian Marquardt]

"trotzdem nicht" ist kein Fehler. Debugge dein Javascript.
Prüfe, ob die Bilder geladen werden. Wozu gibt es die Variablen bild1,bild2,bild3,bild4,bild5? Nur um HTML darum zu haben? Sie werden nie benutzt, außer für den Vergleich. Warum sollte dabei nun einer dieser Variablen true/false werden? Das trifft auf zahlx genaus so zu.

Es sollte vielmehr "nr" verglichen werden mit dem value des gewählten Radiobutton. Dazu wird der Auswahlfunktion der Radiobutton übermittelt, der gerade ausgewählt wurde.

Radiobutton müssen alle den gleichen Namen haben, wenn sie zu einer Gruppe gehören, sonst können mehr als nur einer ausgewählt werden

Des Weitern ist nicht klar, was überhaupt gespielt werden soll. Beim Start wird per Zufall ein Bild angezeigt? Dann springen die Radiobuttons in eine Funktion auswahl() , die was macht? Wann wird vergleichen() aufgerufen?

<script>
function auswahl(rb)
{
alert(rb.value);
}
</script>

<input type=radio name="a" value="1" onClick="auswahl(this)">
<input type=radio name="a" value="2" onClick="auswahl(this)">
<input type=radio name="a" value="3" onClick="auswahl(this)">
<input type=radio name="a" value="4" onClick="auswahl(this)">
<input type=radio name="a" value="5" onClick="auswahl(this)">

[Xanthos]

Hallo Christian Marquardt! Kleine Beschreibung dazu, wenn man die Seite aufruft, soll per Zufall ein Bild angezeigt werden.
bild1.png zeigt ein Pinguin
bild2.png zeigt zwei Pinguine usw.
die Radiobuttons sollen als Antwort gelten, man wählt Radiobutten 1 für bild1.png
ein Pinguin = Zahl_1 = Richtig -> Gewonnen! neue Bild wird geladen
ein Pinguine = Zahl_2= Falsch -> Versuche nochmal!

Danke für deine Hilfe und Tipps, ich werde es heute weiter korrigieren und ausprobieren.

[Nooa]

liegen denn die bilder auch im selben verzeichnis wie die datei welche das sktipt ausführt, bzw. die datei welche dann die anzeige machen soll?

dazu kommt, dass du in deiner prüfung eine zuweisung machst...
Falsch: if (bild1 && zahl_1.checked = true){
Richtig: if (bild1 && zahl_1.checked == true){
Alternativ: if (bild1 && zahl_1.checked){

Frage ist nur: was wertest du mit bild1 aus?
ich sehe nichts was darauf vergleicht, referenziert, ...
dein HTML hat in Punkt 5 einen (schönheits-)fehler "<!-- Punkt 4 -->"

[tömmel]

öh..

bei allem anderen...

var zahl_1 = document.getElementById("input").value = "1";

kommt mir das doch mehr als spanisch vor...

1.) vermisse ich ein Element mit der ID 'input' grundsätzlich im DOM
2.) würd ich erwarten, das es das dann auch nur einmal gibt
3.) bezweifel ich, dass die Zuweisung der eigenschaft value auf dem (ja nicht gefundenen Elelement) überhaupt "Element" zurückgiebt (Bin da zwar nicht 100% sicher wäre aber für mich arg komisch.. über haupt 1=2=3 ???)

müsste im debugger aber doch ordentlich ";Material ausspucken "

Funktion auswahl() sehe ich eigentlich auch nur bei Christian M ...

Und die funktion vergleich ...?

[Xanthos]

Hallo!!!
ok ich habe die Fehler korrigiert, so sieht es nun aus

<!Doctype html>
<head>
<script type="text/javascript">
var bilder = new Array(
  'bild1.png',
  'bild2.png',
  'bild3.png',
  'bild4.png',
  'bild5.png'
);
var nr = Math.floor(Math.random()*bilder.length);
document.write('<img src="'+bilder[nr]+'" alt="" />');



var bild1 = ('<img src="'+bilder[1]+'" alt="" />');
var bild2 = ('<img src="'+bilder[2]+'" alt="" />');
var bild3 = ('<img src="'+bilder[3]+'" alt="" />');
var bild4 = ('<img src="'+bilder[4]+'" alt="" />');
var bild5 = ('<img src="'+bilder[5]+'" alt="" />');
	
var zahl_1 = document.getElementById("a");
var zahl_2 = document.getElementById("b");
var zahl_3 = document.getElementById("c");
var zahl_4 = document.getElementById("d");
var zahl_5 = document.getElementById("e");

function auswahl(rb)


	{
		alert(rb.value);
	}



</script>
</head>
<body>
<img src="bild1.jpg" alt="" />
<form name="forms"> 
	<!-- HTML-Formular definieren -->

<input id="a" type=radio name="a" value="1" onClick="auswahl(this)">
  <!-- Punkt 1 -->
1<br>

<input id="b" type=radio name="a" value="2" onClick="auswahl(this)">
  <!-- Punkt 2 -->
2<br>

<input id="c" type=radio name="a" value="3" onClick="auswahl(this)">
  <!-- Punkt 3 -->
3<br>

<input id="d" type=radio name="a" value="4" onClick="auswahl(this)">
  <!-- Punkt 4 -->
4<br>

<input id="e" type=radio name="a" value="5" onClick="auswahl(this)">
  <!-- Punkt 5 -->
5<br>
</form>
</body>

Die Bilder werden angezeigt, wenn ich Radiobutton auswähle, wird Value angezeigt.
Nun möchte ich eine If- Schleife schreiben
--> wenn bild1.png und rb= value= 1 ausgewählt sind, dann alert Richtig!
wenn nicht, dann alert Falsch!

Ich weiss es aber nicht wie man auf value1,2,3 zugreifen kann, damit ich bild1 sagen kann, dass value mit Wert 1 = bild1 ist usw.

[Christian Marquardt]

If- Schleife
http://www.if-schleife.de/

Siehe Beitrag 4 "nr". Mein Javascriptbeispiel zeigt den Zugriff auf den Value

[Xanthos]

nun gibt mein script immer 'Falsch!' aus.

function auswahl(rb){
 
	
	if(nr[1] == true && rb.value[1] == true){
		alert('Ok');
		}
	else{
		alert('Falsch!');}
	if(nr[2] == true && rb.value[2] == true){
		alert('Ok');
		}
	else{
		alert('Falsch!');}
	if(nr[3] == true && rb.value[3] == true){
		alert('Ok');
		}
	else{
		alert('Falsch!');}
	if(nr[4] == true && rb.value[4] == true){
		alert('Ok');
		}
	else{
		alert('Falsch!');}
	if(nr[5] == true && rb.value[5] == true){
		alert('Ok');
		}
	else{
		alert('Falsch!');}
	

}

[Christian Marquardt]

Warum gibt es die Variablen bildx?
Warum gibt es die Variablen zahlx?
Warum nr in einem Array?
Warum rb.value als Array?
Warum sollte irgendeiner dieser Werte true/false sein?
Warum nicht einfach
if(nr==rb.value)
{
..richtig
}
else
{
..falsch
}

Warum nutzt du nicht eins der zahlreichen Tutorials

[Christian Marquardt]

Hier ein ablauffähiges Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script>
var nr = 4;

function auswahl(rb)
{
if(nr==rb.value)
{
alert("ok");
}
else
{
alert("falsch");
}

}
</script></head>
<body>


<form >
<input type=radio name="a" value="1" onClick="auswahl(this)">
<input type=radio name="a" value="2" onClick="auswahl(this)">
<input type=radio name="a" value="3" onClick="auswahl(this)">
<input type=radio name="a" value="4" onClick="auswahl(this)">
<input type=radio name="a" value="5" onClick="auswahl(this)">
</form>

</body>
</html>

Ob die nr nun per Zufall gesetzt wird oder nicht und ob dann damit ein Bild angezeigt wird, spielt keine Rolle