Function aanroepen via radiobutton

Status
Niet open voor verdere reacties.

Eduard2

Nieuwe gebruiker
Lid geworden
3 nov 2012
Berichten
3
Hallo,

Ik zit met het volgende probleem:
Ik wil via een radiobutton een functie aanroepen, het liefst op dezelfde manier als dit gebeurd met onClick bij een gewone button

Ik heb een aantal vragen met antwoorden in radiobuttons, hier is verder geen form of submit aan verbonden, de functie zorgt dat er een punt
wordt opgeteld of afgetrokken van een totaal. onClick werkt niet, ik kan dan niet eens meer de optie selecteren.

Alvast bedankt!
 
Ziet er inderdaad zeer bruikbaar uit, bedankt!
Heb het geprobeerd, helaas kan ik ook daarbij de optie niet meer selecteren door erop te klikken..
 
De button zie er overigens als volgt uit:
[XML]<input id="radio1" name="langstnietsgedaan2" value="speler1" type="radio" onchange="plusuntspeler1();">
<label for="radio1" id="naam1c">
</label>[/XML]

De ID bij label laad een door de gebruiker eerder ingevoerde naam in als antwoord.
 
Misschien heb je hier ook wat aan - maakt inderdaad gebruik van een change-eventlistener.
- In de functie main worden de radio-elementen verzameld om ze allemaal een listener te geven.
- In de functie onChange word de scoretabel bijgewerkt en de totale score opnieuw berekend.
- In de functie getAnswerValue kun je aangeven hoeveel punten iedere vraag waard is.

Let in ieder geval op het volgende: als je een punt optelt wanneer het antwoord goed is, moet je ook resetten wanneer het antwoord fout is. Anders krijg je bij switchen tussen antwoorden van een vrag mogelijk teveel punten.

Gr. Robin :)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript">

        (function() {
            var scores = [], score = 0;

            function    addEvent(obj, type, callback, useCapture) {
                if (obj.addEventListener) {
                    obj.addEventListener(type, callback, useCapture);
                }
                else if (obj.attachEvent) {
                    obj.attachEvent("on" + type, callback);
                }
                else {
                    console.warn("Failed to add " + type + "-event, ", obj);
                }
            }
            function getAnswerValue(question, answer) {
                switch (question) {
                    case "vraag1": return answer == "B" ? 1 : 0;
                    case "vraag2": return answer == "A" ? 1 :
                                          answer == "B" ? 0.5 : 0;
                }
            }
            function onChange() {
                var i = parseInt(this.name.match(/\d+/), 10) - 1;
                scores[i] = getAnswerValue(this.name, this.value);
                
                score = 0;
                for (i = 0; i < scores.length; i++) {
                    score += scores[i];
                }
                console.log(scores, score);
            }

            function main() {

                for (var i = 0; i < 2; i++) {
                    scores[i] = 0;
                    var radioGroup = document.getElementsByName("vraag" + (i + 1));
                    for (var j = 0; j < radioGroup.length; j++) {
                        addEvent(radioGroup[j], "change", onChange, false);
                    }
                }

            }
            window.onload = main;
        })();

        </script>
        <title>Function aanroepen via radiobutton</title>
    </head>
    <body>
        <p>
            <input name="vraag1" type="radio" value="A"/>
            <input name="vraag1" type="radio" value="B"/><br/>
            <input name="vraag2" type="radio" value="A"/>
            <input name="vraag2" type="radio" value="B"/>
            <input name="vraag2" type="radio" value="C"/>
        </p>
    </body>
</html>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan