fout javascript

Status
Niet open voor verdere reacties.
K

KlaasB

Gebruiker
Lid geworden
25 okt 2000
Berichten
532
Hallo,

Ik wil graag een javascript maken, waarin men diverse keuzes kan maken, waarna er een popup komt met de keuzes. Maar volgens mij heb ik iets niet goed gedaan, want het werkt niet echt goed. wie weet wat ik fout doe? (ben net bezig met een cursus javascript....):

<html>
<head>
<title>Keuzes maken</title>
<style>
<!--
td.kleur {background-color: #ccccff;}
td.dier {background-color: #9999ff;}
td.eten {background-color: #6666ff;}
th {background-color: #33cc33}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var1 = 0;
var2 = 0;
var3 = 0;

function setvar1(waarde)
{
var1=waarde;
}
function setvar2(waarde)
{
var2=waarde;
}
function setvar3(waarde)
{
var3=waarde;
}
window.alert('Dank u wel! U hebt de volgende keuzes gemaakt: uw lievelingskleur is: '+var1+' \nuw lievelingsdier is: '+var2+' en uw \nuw favoriete eten is: '+var3)

//-->
</script>
</head>
<body>
<table width=100%>
<tr>
<th colspan="3">Welke kleur heeft uw voorkeur?</th>
</tr>
<tr>
<td class="kleur" onClick="setvar1(Blauw)">Blauw</td>
<td class="kleur" onClick="setvar1(Groen)">Groen</td>
<td class="kleur" onClick="setvar1(Rood)">Rood</td>
</tr>
<tr>
<th colspan="3">Welk dier heeft uw voorkeur?</th>
</tr>
<tr>
<td class="dier" onClick="setvar2(Kat)">Kat</td>
<td class="dier" onClick="setvar2(Hond)">Hond</td>
<td class="dier" onClick="setvar2(Kip)">Kip</td>
</tr>
<tr>
<th colspan="3">Welk eten heeft uw voorkeur?</th>
</tr>
<tr>
<td class="eten" onClick="setvar3(Patat)">Patat</td>
<td class="eten" onClick="setvar3(Thais)">Thais</td>
<td class="eten" onClick="setvar3(Spaans)">Spaans</td>
</tr>
</table>
<p><a href="javascript:waarde()">Klik hier</a></p>
</body>
</html>
 
Code: 
<html>
<head>
<title>Keuzes maken</title>
<style>
<!--
td.kleur {background-color: #ccccff;}
td.dier {background-color: #9999ff;}
td.eten {background-color: #6666ff;}
th {background-color: #33cc33}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
[COLOR="Red"]var var1 = '';
var var2 = '';
var var3 = '';[/COLOR]

function setvar1(waarde)
{
	var1=waarde;
}
function setvar2(waarde)
{
	var2=waarde;
}
function setvar3(waarde)
{
	var3=waarde;
}
window.alert('Dank u wel! U hebt de volgende keuzes gemaakt: uw lievelingskleur is: '+var1+' \nuw lievelingsdier is: '+var2+' en uw \nuw favoriete eten is: '+var3)

//-->
</script>
</head>
<body>
<table width=100%>
<tr>
	<th colspan="3">Welke kleur heeft uw voorkeur?</th>
</tr>
<tr>
	<td class="kleur" onClick="setvar1(Blauw)">Blauw</td>
	<td class="kleur" onClick="setvar1(Groen)">Groen</td>
	<td class="kleur" onClick="setvar1(Rood)">Rood</td>
</tr>
<tr>
	<th colspan="3">Welk dier heeft uw voorkeur?</th>
</tr>
<tr>
	<td class="dier" onClick="setvar2(Kat)">Kat</td>
	<td class="dier" onClick="setvar2(Hond)">Hond</td>
	<td class="dier" onClick="setvar2(Kip)">Kip</td>
</tr>
<tr>
	<th colspan="3">Welk eten heeft uw voorkeur?</th>
</tr>
<tr>
	<td class="eten" onClick="setvar3(Patat)">Patat</td>
	<td class="eten" onClick="setvar3(Thais)">Thais</td>
	<td class="eten" onClick="setvar3(Spaans)">Spaans</td>
</tr>
</table>
	<p><a href="javascript:waarde()">Klik hier</a></p>
</body>
</html>

Probeer zo eens :)

Want zoals ik het zo kon zien had je je variabelen als Integer gedefiniëerd, terwijl het String's moesten zijn.
 
Bedankt voor je reactie, maar als je dit script uitvoert krijg ik nog steeds foutmeldingen, bovendien komt het in de verkeerde volgorde...
 
Ben zelf al een beetje verder gekomen, maar als je het script uitvoert, maakt ie geen keuzes....kijk maar:

<html>
<head>
<title>Keuzes maken</title>
<style>
<!--
td.kleur {background-color: #ccccff;}
td.dier {background-color: #9999ff;}
td.eten {background-color: #6666ff;}
th {background-color: #33cc33}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var var1 = '';
var var2 = '';
var var3 = '';

function setvar1(waarde)
{
var1=waarde;
}
function setvar2(waarde)
{
var2=waarde;
}
function setvar3(waarde)
{
var3=waarde;
}
function waarde()
{
waarde = var1+var2+var3;

window.alert('Dank u wel! U hebt de volgende keuzes gemaakt: uw lievelingskleur is: '+var1+' \nuw lievelingsdier is: '+var2+' en uw \nuw favoriete eten is: '+var3)
}
//-->
</script>
</head>
<body>
<table width=100%>
<tr>
<th colspan="3">Welke kleur heeft uw voorkeur?</th>
</tr>
<tr>
<td class="kleur" onClick="setvar1">Blauw</td>
<td class="kleur" onClick="setvar1">Groen</td>
<td class="kleur" onClick="setvar1">Rood</td>
</tr>
<tr>
<th colspan="3">Welk dier heeft uw voorkeur?</th>
</tr>
<tr>
<td class="dier" onClick="setvar2">Kat</td>
<td class="dier" onClick="setvar2">Hond</td>
<td class="dier" onClick="setvar2">Kip</td>
</tr>
<tr>
<th colspan="3">Welk eten heeft uw voorkeur?</th>
</tr>
<tr>
<td class="eten" onClick="setvar3">Patat</td>
<td class="eten" onClick="setvar3">Thais</td>
<td class="eten" onClick="setvar3">Spaans</td>
</tr>
</table>
<p><a href="javascript:waarde()">Klik hier</a></p>
</body>
</html>
 
Het probleem is dat je waarde als functie en als variabele gebruikt.

Verander function waarde in function Waarde en verwijder binnen die functie de lijn waarde=var1+var2+var3.

Bij de "td"'s staat setvar1 ipv setvar1('blauw'); setvar1('groen'); of setvar1('rood');.

Hetzelfde heb je bij je setvar2 en setvar3.

Hier is een voorbeeld.

Hier volgt de juiste code :
HTML: 
<html>
<head>
<title>Keuzes maken</title>
<style>
<!--
td.kleur {background-color: #ccccff;cursor: hand;}
td.dier {background-color: #9999ff;cursor: hand;}
td.eten {background-color: #6666ff;cursor: hand;}
th {background-color: #33cc33}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var var1 = '';
var var2 = '';
var var3 = '';

function setvar1(waarde)
{
var1=waarde;
}
function setvar2(waarde)
{
var2=waarde;
}
function setvar3(waarde)
{
var3=waarde;
}
function Waarde()
{
window.alert('Dank u wel!\nU hebt de volgende keuzes gemaakt:\nuw lievelingskleur is: '+var1+'\nuw lievelingsdier is: '+var2+'\nen uw favoriete eten is: '+var3)
}
//-->
</script>
</head>
<body>
<table width=100%>
<tr>
<th colspan="3">Welke kleur heeft uw voorkeur?</th>
</tr>
<tr>
<td class="kleur" onClick="setvar1('blauw');">Blauw</td>
<td class="kleur" onClick="setvar1('groen');">Groen</td>
<td class="kleur" onClick="setvar1('rood');">Rood</td>
</tr>
<tr>
<th colspan="3">Welk dier heeft uw voorkeur?</th>
</tr>
<tr>
<td class="dier" onClick="setvar2('kat');">Kat</td>
<td class="dier" onClick="setvar2('hond');">Hond</td>
<td class="dier" onClick="setvar2('kip');">Kip</td>
</tr>
<tr>
<th colspan="3">Welk eten heeft uw voorkeur?</th>
</tr>
<tr>
<td class="eten" onClick="setvar3('patat');">Patat</td>
<td class="eten" onClick="setvar3('thaïs');">Thais</td>
<td class="eten" onClick="setvar3('spaans');">Spaans</td>
</tr>
</table>
<p><a href="javascript:Waarde()">Klik hier</a></p>
</body>
</html>

Ik heb me ook de vrijheid genomen de cursor te veranderen als je over een mogelijke keuze komt naar een handje. ;)
Ik werk vanavond nog aan een optie die een andere alert weergeeft met de keuzes die je nog moet maken.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Vroeger dan verwacht, maar dit is het geworden :

HTML: 
<html>
<head>
<title>Keuzes maken</title>
<style>
<!--
td.kleur {background-color: #ccccff;cursor: hand;}
td.dier {background-color: #9999ff;cursor: hand;}
td.eten {background-color: #6666ff;cursor: hand;}
th {background-color: #33cc33}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var var1 = '';
var var2 = '';
var var3 = '';
var keuze = new Array("kleur","dier","eten");


function setvar1(waarde)
{
var1=waarde;
}
function setvar2(waarde)
{
var2=waarde;
}
function setvar3(waarde)
{
var3=waarde;
}
function Waarde()
{
var kies = '';
for (var i = 0; i < keuze.length; i++) {
if (eval("var"+(i+1)) == "") {
kies += keuze[i] + "\n";
};
};
if (!kies) {
window.alert('Dank u wel!\nU hebt de volgende keuzes gemaakt:\nuw lievelingskleur is: '+var1+'\nuw lievelingsdier is: '+var2+'\nen uw favoriete eten is: '+var3)
} else {
alert('U moet nog de volgende keuzes maken :\n' + kies);
};
};
//-->
</script>
</head>
<body>
<table width=100%>
<tr>
<th colspan="3">Welke kleur heeft uw voorkeur?</th>
</tr>
<tr>
<td class="kleur" onClick="setvar1('blauw');">Blauw</td>
<td class="kleur" onClick="setvar1('groen');">Groen</td>
<td class="kleur" onClick="setvar1('rood');">Rood</td>
</tr>
<tr>
<th colspan="3">Welk dier heeft uw voorkeur?</th>
</tr>
<tr>
<td class="dier" onClick="setvar2('kat');">Kat</td>
<td class="dier" onClick="setvar2('hond');">Hond</td>
<td class="dier" onClick="setvar2('kip');">Kip</td>
</tr>
<tr>
<th colspan="3">Welk eten heeft uw voorkeur?</th>
</tr>
<tr>
<td class="eten" onClick="setvar3('patat');">Patat</td>
<td class="eten" onClick="setvar3('thaïs');">Thais</td>
<td class="eten" onClick="setvar3('spaans');">Spaans</td>
</tr>
</table>
<p><a href="javascript:Waarde()">Klik hier</a></p>
</body>
</html>

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan