Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Focus after event in Javascript

Annie
4 antwoorden
  • Hoi beste kenners,

    Heeft iemand een idee wat ik fout doe?
    Het gaat mij om dit stukje code:

    if (antwoord != antwoorden[huidigevraag])
    {
    if (pogingen[huidigevraag] == 1)
    {
    alert("Helaas fout! Probeer het nog eens.
    Je mag nu de hulp gebruiken.");
    vragenform.elements["vraag" + huidigevraag].value = '';
    vragenform.elements["vraag" + huidigevraag].focus();


    Ik wil de focus zetten op een tekstveld nadat er iets gebeurt is.

    [code:1:9386fe1d29]
    <script language="Javascript">

    // definieer de pogingenteller
    var pogingen = new Array();
    // en zet deze ook meteen voor de volledigheid op 0
    for (var i = 0; i < antwoorden.length; i++) pogingen[i] = 0;

    // teller voor de huidige vraag
    var huidigevraag = 1;

    // teller voor het aantal goede antwoorden
    var goed = 0;

    // teller voor het aantal foute antwoorden
    var fout = 0;

    // functie voor controle van antwoorden
    function controleerAntwoord()
    {
    var vragenform = document.forms[0];

    // hoog de pogingen teller op voor deze vraag
    pogingen[huidigevraag]++;

    // haal antwoord uit het formulier
    var antwoord = vragenform.elements["vraag" + huidigevraag].value;

    var volgendevraag = true;
    // spring naar de volgende vraag als het antwoord goed is
    // of als het antwoord fout is en dit de tweede poging is
    if (vragenform.elements["vraag" + huidigevraag].value == '')
    {
    alert('Je hebt geen antwoord ingevuld bij vraag' + " " + [huidigevraag]);
    }
    else if (antwoord == antwoorden[huidigevraag])
    {

    goed++;
    vragenform.elements["goed"].value = goed;
    vragenform.elements["fout"].value = (huidigevraag - 1) - goed;
    alert("goed zo!
    " + (goed) + " " + "vragen goed en" + " " + (fout) + " " + "vragen fout.");
    var ext = "Images/groenVinkje.gif";
    document.images['imgvraag' + huidigevraag].src = ext;
    vragenform.elements["vraag" + huidigevraag].style.color = "#FFFFFF";
    vragenform.elements["vraag" + huidigevraag].style.fontWeight = "Bold";
    vragenform.elements["vraag" + huidigevraag].style.backgroundColor = "#00CC00";

    volgendevraag = true;
    }
    if (antwoord != antwoorden[huidigevraag])
    {
    if (pogingen[huidigevraag] == 1)
    {
    alert("Helaas fout! Probeer het nog eens.
    Je mag nu de hulp gebruiken.");
    vragenform.elements["vraag" + huidigevraag].value = '';
    vragenform.elements["vraag" + huidigevraag].focus();
    {
    volgendevraag = false;
    }
    }
    else
    {
    {
    fout++;
    vragenform.elements["goed"].value = goed;
    vragenform.elements["fout"].value = (huidigevraag - 1) - goed;
    alert("Twee keer fout.
    Ga verder met de volgende vraag.
    " + "Tot nu toe heb je" + " " + (goed) + " " + "vragen goed en" + " " + (fout) + " " + "fout beantwoord.");
    }
    {
    var ext = "Images
    oodkruis.gif";
    document.images['imgvraag' + huidigevraag].src = ext;
    vragenform.elements["vraag" + huidigevraag].style.color = "#FFFFFF";
    vragenform.elements["vraag" + huidigevraag].style.fontWeight = "bold";
    vragenform.elements["vraag" + huidigevraag].style.backgroundColor = "#FF0000";
    }
    {
    volgendevraag = true;
    }
    }
    }

    // als we naar de volgende vraag springen deactiveer dan even de vorige
    if (volgendevraag == true)
    {
    //vragenform.elements["vraag" + huidigevraag].disabled = true;
    vragenform.elements["vraag" + huidigevraag].readOnly = true;

    huidigevraag++;
    }

    // Bijwerken goede en foute antwoorden
    vragenform.elements["goed"].value = goed;
    vragenform.elements["fout"].value = (huidigevraag - 1) - goed;

    // als we bij de laatste vraag aanbeland zijn spring dan door naar de volgende pagina
    // en zo niet geef dan de focus aan de vraag waar we zijn
    if (huidigevraag == antwoorden.length)
    {
    var Yes = confirm("Dit was de laatste vraag.

    Totaal score:
    " + (goed) + " " + "Goed
    " + (fout) + " " + "Fout

    Klik op 'OK' als je naar de volgende vragen wilt, Klik anders op 'Annuleren' om deze vragen nog een keer te doen.");
    if (Yes==true)
    {
    window.location.href = 'groep3_les2.htm';
    }
    else
    {
    window.location = 'groep3_les1.htm';
    }
    }
    else
    {
    vragenform.elements["vraag" + huidigevraag].focus();
    }
    }
    </script>
    [/code:1:9386fe1d29]


    Alvast bedankt.

    Eric.
  • [quote:7835c2fe23="Eric33"]Heeft iemand een idee wat ik fout doe?
    Het gaat mij om dit stukje code:
    ….[/quote:7835c2fe23]
    De code ziet er prima uit zo op het eerste gezicht. Wat gaat er eigenlijk mis? Krijg je een foutmelding of krijgt het invoerveld gewoon niet de focus?
  • post anders eens de hele code (met form erbij) of een URI waar we een testpagina oid kunnen vinden..

    t.
  • Hallo,

    Inderdaad krijgt het invoerveld niet de focus.

    Ik zal het letterlijk uitleggen wat er gebeurt.

    Ik krijg geen foutmelding

    Wanneer ik voor de eerste keer en fout antwoordt invul, komt er een "alert", met de mededeling "Fout! Probeer het nog eens".

    Wanneer er nu op "OK" geklikt wordt moet het foute antwoord weggehaald worden en vervolgens moet dat invoerveld opnieuw de "focus" krijgen.

    De code van het formulier ziet er zo uit:
    [code:1:f157d14cd6]
    <form>
    <table>
    <tr>
    <td colspan="4"><div align="center">"Oefening 1 Erbij"</div></td>
    <td width="60"></td>
    <td colspan="4"><div align="center">"Oefening 1 Eraf"</div></td>
    </tr>
    <tr>
    <td width="81" bgcolor="#FF0000"><font color="#FFFFFF">Vraag 1:</font></td>
    <td width="52" bgcolor="#FF0000"><font color="#FFFFFF">1 + 1 =</font></td>
    <td width="37" bgcolor="#FF0000"><font color="#FFFFFF">
    <input type="text" name="vraag1" size="2" width="20" id="vr1_ID" onChange="controleerAntwoord()">
    </font></td>
    <td width="23"><img name="imgvraag1" src="Images/leeg.gif"></td>
    <td width="60">&nbsp;</td>
    <td width="93">Vraag 11:</td>
    <td width="68">&nbsp;&nbsp;2 - 1 =</td>
    <td width="20"><input type="text" name="vraag11" size="2" width="20" onChange="controleerAntwoord()"/></td>
    <td width="80"><img name="imgvraag11" src="Images/leeg.gif"></td>
    </tr>
    <tr>
    <td bgcolor="#00CC33">Vraag 2:</td
    >
    <td bgcolor="#00CC33">1 + 2 =</td>
    <td bgcolor="#00CC33"><input type="text" name="vraag2" size="2" width="20" onChange="controleerAntwoord()"/></td>
    <td><img name="imgvraag2" src="Images/leeg.gif"></td>
    <td>&nbsp;</td>
    <td>Vraag 12:</td>
    <td>&nbsp;&nbsp;3 - 2 =</td>
    <td><input type="text" name="vraag12" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img name="imgvraag12" src="Images/leeg.gif"></td>
    </tr>
    <tr>
    <td bgcolor="#0000FF"><font color="#FFFFFF">Vraag 3:</font></td>
    <td bgcolor="#0000FF"><font color="#FFFFFF">2 + 3 =</font></td>
    <td bgcolor="#0000FF"><font color="#FFFFFF">
    <input type="text" name="vraag3" size="2" width="20" onChange="controleerAntwoord()">
    </font></td>
    <td><font color="#FFFFFF"><img name="imgvraag3" src="Images/leeg.gif"></font></td>
    <td><font color="#FFFFFF">&nbsp;</font></td>
    <td>Vraag 13:</td>
    <td>&nbsp;&nbsp;4 - 2 =</td>
    <td><input type="text" name="vraag13" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img name="imgvraag13" src="Images/leeg.gif"></td>
    </tr>
    <tr>
    <td height="26" bgcolor="#FF9900">Vraag 4:</td>
    <td bgcolor="#FF9900">3 + 4 =</td>
    <td bgcolor="#FF9900"><input type="text" name="vraag4" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag4"></td>
    <td></td>
    <td>Vraag 14:</td>
    <td>&nbsp;&nbsp;5 - 2 =</td>
    <td><input type="text" name="vraag14" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag14"></td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF">Vraag 5:</td>
    <td bgcolor="#FFFFFF">4 + 2 =</td>
    <td bgcolor="#FFFFFF"><input type="text" name="vraag5" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag5"></td>
    <td></td>
    <td>Vraag 15:</td>
    <td>&nbsp;&nbsp;6 - 2 =</td>
    <td><input type="text" name="vraag15" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag15"></td>
    </tr>
    <tr>
    <td bgcolor="#00CC33">Vraag 6:</td>
    <td bgcolor="#00CC33">5 + 2 =</td>
    <td bgcolor="#00CC33"><input type="text" name="vraag6" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag6"></td>
    <td></td>
    <td>Vraag 16:</td>
    <td>&nbsp;&nbsp;7 - 3 =</td>
    <td><input type="text" name="vraag16" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag16"></td>
    </tr>
    <tr>
    <td bgcolor="#33CCFF">Vraag 7:</td>
    <td bgcolor="#33CCFF">6 + 3 =</td>
    <td bgcolor="#33CCFF"><input type="text" name="vraag7" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag7"></td>
    <td></td>
    <td>Vraag 17:</td>
    <td>&nbsp;&nbsp;8 - 5 =</td>
    <td><input type="text" name="vraag17" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag17"></td>
    </tr>
    <tr>
    <td bgcolor="#FF00FF">Vraag 8:</td>
    <td bgcolor="#FF00FF">8 + 1 =</td>
    <td bgcolor="#FF00FF"><input type="text" name="vraag8" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag8"></td>
    <td></td>
    <td>Vraag 18:</td>
    <td>&nbsp;&nbsp;8 - 6 =</td>
    <td><input type="text" name="vraag18" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag18"></td>
    </tr>
    <tr>
    <td bgcolor="#00FF00">Vraag 9:</td>
    <td bgcolor="#00FF00">2 + 6 =</td>
    <td bgcolor="#00FF00"><input type="text" name="vraag9" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag9"></td>
    <td></td>
    <td>Vraag 19:</td>
    <td>&nbsp;&nbsp;9 - 6 =</td>
    <td><input type="text" name="vraag19" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag19"></td>
    </tr>
    <tr>
    <td bgcolor="#00FFFF">Vraag 10:</td>
    <td bgcolor="#00FFFF">3 + 7 =</td>
    <td bgcolor="#00FFFF"><input type="text" name="vraag10" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag10"></td>
    <td></td>
    <td>Vraag 20:</td>
    <td>10 - 4 =</td>
    <td><input type="text" name="vraag20" size="2" width="20" onChange="controleerAntwoord()"></td>
    <td><img src="Images/leeg.gif" name="imgvraag20"></td>
    </tr>
    <tr>
    <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
    <td><font color="#33CC00">Vragen goed</font>:</td>
    <td><input type="text" name="goed" readonly="True" value="0" size="5" width="20"></td>
    </tr>
    <tr>
    <td><font color="#FF0000">Vragen fout:</font></td>
    <td><input type="text" name="fout" readonly="Yes" value="0" size="5" width="20"></td>
    </tr>
    <tr>
    <td colspan="4"><input type="button" name="reset form" value="Nog een keer?" onClick="resetform()"></td>
    </tr>
    </table>
    </form>
    [/code:1:f157d14cd6]

    Ik hoop dat het nu duidelijker wordt voor jullie.

    Groetjes, Eric.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.