0

いくつかの質問を含む調査を作成しようとしています。選択肢ごとの投票数を追跡するために必要です。次に、すべての結果を表示します。何が間違っているのかわかりません。「結果の表示」または「送信」をクリックしても、関数がまったく呼び出されません。なんで？

    <body>
    <form id="surveyForm">
        <ul>
            <li>What is your favorite color?</li>
            <li><input type="radio" id="red" name="red" value="red"><for name="red">Red</for></li>
            <li><input type="radio" id="green" name="green" value="green"><for name="red">Green</for></li>
            <li><input type="radio" id="blue" name="blue" value="blue"><for name="blue">Blue</for></li>
        </ul>

        <input type="button" id="viewSurvey" value="View Survey Results">
        <input type="button" id="submitSurvey" value="Submit">
    </form>

    <script>

        var redCount = 0;
        var greenCount = 0;
        var blueCount = 0;

        if (window.addEventListener)
            addEvent = function(ob, type, fn ) {
                ob.addEventListener(type, fn, false );
            };
        else if (document.attachEvent)
            addEvent = function(ob, type, fn ) {
                var eProp = type + fn;
                ob['e'+eProp] = fn;
                ob[eProp] = function(){ob['e'+eProp]( window.event );};
                ob.attachEvent( 'on'+type, ob[eProp]);
            };


        function $(id) {
            return document.getElementById(id);
        }

        var redColor = $('red');
        var greenColor = $('green');
        var blueColor = $('blue');
        var viewSurvey = $('viewSurvey');
        var submitSurvey = $('submitSurvey');
        var formSurvey = $('surveyForm');

        function showSurvey() {
            alert(redColor + " " + greenColor + " " + blueColor);
            return false;
        }

        function sendSurvey() {
            if($(redColor).selected) {
                redColor += 1;
            } else if($(greenColor)) {
                greenColor += 1;
            } else if($(blueColor)) {
                blueColor += 1;
            }
            return false;
        }

        addEvent(viewSurvey, 'onclick', showSurvey);
        addEvent(submitSurvey, 'onclick', sendSurvey);

    </script>
    </body>
    </html>
4

2 に答える 2

0

コードには多くの問題があります。addEvent 関数は正しくありません (簡略化されたバージョンを参照)。間違った場所で間違った変数を使用しています。たとえば、count 変数でcheckedはなく DOM 要素をインクリメントしますselected。ラジオ ボタンはグループ化されていないため、3 つすべてを一度にチェックできます。

ワーキングデモ

var redCount = 0;
var greenCount = 0;
var blueCount = 0;
var redColor;
var greenColor;
var blueColor;
var viewSurvey;
var submitSurvey;
var formSurvey;

function $(id) {
    return document.getElementById(id);
}

function showSurvey() {
    alert("red: " + redCount + ", green:" + greenCount + ", blue: " + blueCount);
    return false;
}

function sendSurvey() {
    if((redColor).checked) {
        redCount += 1;
    } else if((greenColor).checked) {
        greenCount += 1;
    } else if((blueColor).checked) {
        blueCount += 1;
    }
    return false;
}


function addEvent(elem, event, handler){
    elem[event] = handler;
}

window.onload = function(){
    redColor = $('red');
    greenColor = $('green');
    blueColor = $('blue');
    viewSurvey = $('viewSurvey');
    submitSurvey = $('submitSurvey');
    formSurvey = $('surveyForm');

    addEvent(viewSurvey, 'onclick', showSurvey);
    addEvent(submitSurvey, 'onclick', sendSurvey);
}
于 2013-10-25T06:55:36.177 に答える