설문 조사 선택 및 결과 출력

몇 가지 질문이있는 설문 조사를 만들려고합니다. 선택 당 몇 개의 득표를 추적해야합니다. 그런 다음 모든 결과를 봅니다. 내가 뭘 잘못하고 있는지 모르겠다. '결과보기'또는 '제출'을 클릭하면 함수를 전혀 호출하지 않습니다. 왜?설문 조사 선택 및 결과 출력

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

출처

2013-10-25 rushd

필요가 아이디어를 얻을 수 있습니다. –

몇 가지 코드가 있습니다 ... 내가 아직 유효하지 않은 이벤트 나 완전히 다른 것을 사용하고 있는지 아직 알지 못합니다. 아직 머리를 감쌀 수 없습니다. – rushd

'클릭'**으로 'onclick'을 변경하십시오. 그러면 코드가 실행되고 오류가 발생합니다. –

코드는 많은 문제를 가지고있다. 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); 
}

출처

2013-10-25 06:55:36 MrCode

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

출처

2013-10-25 06:35:07

인라인 이벤트 선언을 피하십시오. – jasonscript

@jasonscript 이는 테스트 용입니다. :-) –

그것이 작동하는지 보려면 인라인으로 테스트하는 것이 현명한 선택입니다. 어쩌면 저에게 더 많은 통찰력을 줄 수 있었을 것입니다. – rushd

답변

관련 문제