Ask survey choice and output results

StackOverflow https://stackoverflow.com/questions/19582182

  •  01-07-2022
  •  | 
  •  

Domanda

I'm trying to create a survey w/ a few questions. I need it to keep track of how many votes per choice. Then view all results. I'm not sure what I'm doing wrong. When I click 'view result' or 'submit', it doesn't call the functions at all. Why?

    <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>
È stato utile?

Soluzione 2

The code has many problems. The addEvent function isn't right (see simplified version), using the wrong variables in the wrong place e.g. incrementing the DOM element not the count variable, checked should be used not selected. Your radio buttons aren't grouped and so all three could be checked at once.

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

Altri suggerimenti

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top