Question

我正在尝试用几个问题创建调查。我需要它来跟踪每个选择的票数。然后查看所有结果。我不确定我做错了什么。当我点击“查看结果”或“提交”时，它根本不会调用这些函数。为什么呢？

    <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>

Answer 1

<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(redCount + " " + greenCount + " " + blueCount);
            return false;
        }

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

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

    </script>

Answer 2

代码有很多问题。 addEvent函数不正确（参见简化版本），在错误的位置使用错误的变量，例如递增DOM元素而不是计数变量，checked不应该使用selected。您的单选按钮未分组，因此可以立即检查所有三个按钮。

Working demo

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);
}

询问调查选择和输出结果

2 个答案: