Help, ik vind mijn fout niet.

simonskills · 10 feb 2014

Hey,

Kun je mij helpen?
Ik wil het volgende script maken waarin ik 3keuzen moet maken door op de te klikken dan vervolgens op "klik hier" te drukken en deze in een window.alert venster te plaatsten...Dit heb ik al kunnen maken met natuurlijk moeten de diersoort, kleursoort en eten in het venster van alert komen.

Dit is de code die ik heb gebruikt.
Wat moet ik er aan veranderen?

HTML:

<html>
<head>
<title>Rekenmachine</title>
<style type="text/css">
<!--

var var1=
td.hoofd 	{

			background-color:#CCCCFF;
}

td.andere {
			background-color:#9999FF;
}

th			{
			background-color:#6666FF;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
//variabelen
var kleur;
var dier;
var eten;

function kleur(waarde) {
	kleur=waarde;
}

function dier(waarde) {
	dier=waarde;
}

function eten(waarde) {
	eten=waarde;
}

function kies() {
	
	kleur=document.write=(kleur());
	dier=document.write=(dier());
	eten=document.write=(eten());
	window.alert("Uw"+kleur+ dier+ " eet graag "+ eten);
}
//-->
</script>
</head>
<body>
<table summary="" width="600">

    
    <tr>
    	<td class="hoofd" width="200">Uw lievelingskleur is:</td>
        <td class="andere" onClick="kleur(blauw)" width="200">blauw</td>
        <td class="andere"  onClick="kleur(groen)" width="200">groen</td>
        <td class="andere"  onClick="kleur(rood)" width="200">rood</td>
        </tr>
      <tr>
    	<td class="hoofd" >Uw lievelingsdier is:</td>
        <td class="andere" onClick="dier(kat)">kat</td>
        <td class="andere" onClick="dier(hond)">hond</td>
        <td class="andere" onClick="dier(kip)">kip</td>
        
    </tr>
   
    <tr>
    	<td class="hoofd" >Uw lievelingseten is:</td>
        <td class="andere" onClick="eten(friet)">friet</td>
        <td class="andere" onClick="eten(thais)">thais</td>
        <td class="andere" onClick="eten(spaans)">spaans</td>
    </tr>
    
    <tr>
    	<td><a href="javascript:void(kies());">Klik hier</a></td>
        <td></td>
        <td></td>
        </tr>
</table>
</body>
</html>

Tha Devil · 11 feb 2014

Ik zie dat je Safari gebruikt, heb je daar het ontwikkelaarsmenu ook aangevinkt?

Safari > Voorkeuren > Geavanceerd > [ ] Toon ontwikkelaarsmenu

Wanneer je dan CMD+ALT+i indrukt wanneer je je pagina hebt geopend dan krijg je de Web Inspector.
Ga dan naar Console (wanneer die niet meteen is geopend) en je zult ongetwijfeld foutmeldingen zien verschijnen.

Kvothe · 11 feb 2014

Het is nogal slordig om tegelijk een functie voorbeeld() en een var voorbeeld te definiëren.

Ga ook even na wat het aanroepen van de functie kleur(blauw) doet.

simonskills · 11 feb 2014

Na het klikken van blauw en "klik hier" krijg ik de volgende foutmeldingen.

Ik begrijp er dan ook hellemaal niets van.
Het is een cursus die ik thuis volg via nha maar helaas kan ik op geen enkele manier contact opnemen met mijn mentor, alhoewel ik hiervoor extra betaal. Dit ter zijde...

Pleas kan er iemand mij helpen waar de fout zit...

Mvg,

Simon

Tha Devil · 11 feb 2014

Allereerst de opmerking van Kvothe zou ik eerst verwerken, een functie dezelfde naam geven als een variabele is geen goed idee en maakt het risico op fouten groter.

Daarnaast:

Regel 7: Javascript in je CSS

Regel 41: Je functie kies is, met alle respect, een zootje

Kijk eerst eens hoe document.write werkt, in ieder geval niet op de manier zoals je het daar gebruikt.

Verder vraag je daar weer de functie kleur op zonder een parameter mee te geven. Je doet immers kleur() terwijl in je functiedeclaratie op regel een parameter "waarde" wordt verwacht.

Het lijkt er op alsof je niet helder hebt wat je wilt doen en hoe je dat voor elkaar kunt krijgen.

Zet voor jezelf op papier welke stappen er gevolgd moeten worden voor je bij het einde bent.
Werk dan deze stappen uit.

Heb je nog voorwaarden waaraan je moet voldoen?

Daarnaast is het handig om te weten hoe het zit met de "function scope", welke variabelen kun je wel en niet binnen een functie benaderen.

Werkend voorbeeld:

HTML:

<html>
    <head>
        <title>Rekenmachine</title>
        <style type="text/css">
            td.hoofd { background-color:#CCCCFF; }
            td.andere { background-color:#9999FF; }
            th { background-color:#6666FF; }
        </style>
        <script type="text/javascript" language="javascript">
        var Keuze = (function () {
            var _kleur,
                _dier,
                _eten;
            
            var getSentence = function ()
            {
                window.alert('Uw '+ _kleur +' '+ _dier +' eet graag '+ _eten);
            };
            
            var setKleur = function(kleur)
            {
                _kleur = kleur;
            };
            var setDier = function(dier)
            {
                _dier = dier;
            };
            var setEten = function(eten)
            {
                _eten = eten;
            };
            return {
                getSentence: getSentence,
                setKleur : setKleur,
                setDier : setDier,
                setEten : setEten
          };
        
        })();
        </script>
    </head>
    <body>
        <table summary="" width="600">
            <tr>
                <td class="hoofd" width="200">Uw lievelingskleur is:</td>
                <td class="andere" onClick="javascript: Keuze.setKleur('blauwe')" width="200">blauw</td>
                <td class="andere" onClick="javascript: Keuze.setKleur('groene')" width="200">groen</td>
                <td class="andere" onClick="javascript: Keuze.setKleur('rode')" width="200">rood</td>
            </tr>
            <tr>
                <td class="hoofd" >Uw lievelingsdier is:</td>
                <td class="andere" onClick="javascript: Keuze.setDier('kat')">kat</td>
                <td class="andere" onClick="javascript: Keuze.setDier('hond')">hond</td>
                <td class="andere" onClick="javascript: Keuze.setDier('kip')">kip</td>
            </tr>
            <tr>
                <td class="hoofd" >Uw lievelingseten is:</td>
                <td class="andere" onClick="javascript: Keuze.setEten('friet')">friet</td>
                <td class="andere" onClick="javascript: Keuze.setEten('thais')">thais</td>
                <td class="andere" onClick="javascript: Keuze.setEten('spaans')">spaans</td>
            </tr>
            <tr>
                <td><a href="javascript:Keuze.getSentence()">Klik hier</a></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

http://jsfiddle.net/fT4wh/
En ja, dit is een omslachtige manier

simonskills · 11 feb 2014

WAW HET WERKT!
Keihard bedankt echt waar!
Ik zal het eens grondig bekijken in de hoop dat ik het beter begrijp want het is toch zo simpel nog niet.
Maar alvast bedankt ik zal echt mijn best doen om het te leren.
Waar heb jij dit geleerd?
Op school ofzo of ook via een cursus...
Zoja kun je mij iets aanbevelen dat mij op weg kan helpen om hieromtrent wat meer van te leren?

Mvg, simon

Tha Devil · 11 feb 2014

In feite heb je aan dit voldoende:

HTML:

<html>
    <head>
        <title>Rekenmachine</title>
        <style type="text/css">
            td.hoofd { background-color:#CCCCFF; }
            td.andere { background-color:#9999FF; }
            th { background-color:#6666FF; }
        </style>
        <script type="text/javascript" language="javascript">
            var kleur,
                dier,
                eten;
        </script>
    </head>
    <body>
        <table summary="" width="600">
            <tr>
                <td class="hoofd" width="200">Uw lievelingskleur is:</td>
                <td class="andere" onClick="javascript: kleur = 'blauwe'" width="200">blauw</td>
                <td class="andere" onClick="javascript: kleur = 'groene'" width="200">groen</td>
                <td class="andere" onClick="javascript: kleur = 'rode'" width="200">rood</td>
            </tr>
            <tr>
                <td class="hoofd">Uw lievelingsdier is:</td>
                <td class="andere" onClick="javascript: dier = 'kat'">kat</td>
                <td class="andere" onClick="javascript: dier = 'hond'">hond</td>
                <td class="andere" onClick="javascript: dier = 'kip'">kip</td>
            </tr>
            <tr>
                <td class="hoofd">Uw lievelingseten is:</td>
                <td class="andere" onClick="javascript: eten = 'friet'">friet</td>
                <td class="andere" onClick="javascript: eten = 'thais'">thais</td>
                <td class="andere" onClick="javascript: eten = 'spaans'">spaans</td>
            </tr>
            <tr>
                <td><a href="javascript: window.alert('Uw '+ kleur +' '+ dier +' eet graag '+ eten);">Klik hier</a></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

http://jsfiddle.net/A39eK/1/

Zulke dingen leer je door veel te doen, en de basis te begrijpen.
Als je niet begrijpt wat bepaalde regels doen dan heb je er weinig aan.

Een handige website is Codecademy, daar kun je diverse talen leren door middel van opdrachten uit te voeren.

Help, ik vind mijn fout niet.

simonskills

Gebruiker

Tha Devil

Moderator

Kvothe

Gebruiker

simonskills

Gebruiker

Tha Devil

Moderator

simonskills

Gebruiker

Tha Devil

Moderator

Nieuwste berichten

Wij waarderen jouw privacy