2017-04-17 8 views
0

그래서 Buzzfeed 스타일의 퀴즈를 만들려고하고 있지만 각 대답 선택에서 값을 가져 와서 var 'score'에 함께 추가하는 데 문제가 있습니다. 내 스크립트에는 작동하지 않는 절반의 기능이 있습니다. 나는 단지 뇌우에 시달리고 있었다. 배열을 사용해야합니까 아니면 입력이 괜찮습니까? 나는 이것에 아주 새롭다 그래서 너는 약간 우스운 과실을 보는 경우에 저를 용서하십시오. 감사! :)라디오 버튼에서 값 가져 오기

`

<!DOCTYPE html> 
<html> 
<head> 
    <link href="main.css" rel="stylesheet" > 

<script>  

    var score = 0; 
    var a1, a2, a3, a4; 

function next(){ 

    a1 = document.getElementById("shirt").value; 
    a2 = document.getElementById("zodiac").value; 
    a3 = document.getElementById("saturday").value; 
    a4 = document.getElementById("hunger").value; 

    score = a1+a2+a3+a4; 

    if(score<=3) { 

    return("You should eat a banana.") 
} 
}  

function alertFunction(){ 
     alert(score); 
    } 

function checkRadio(){ 
    if(document.getElementById('name')=="shirt") { 

    } 
}  

    console.log(score); 

</script> 

<style> 

    div { 
     border: 1px solid black; 
     background-color: #def2ed; 
     padding: 20px;  
     margin-left: auto; 
    } 
</style> 
</head> 
<body> 

    <form class = "quiz"> 


<div id="shirt"> 

    <h2>Question #1: What color shirt are you currently wearing? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="sh1" type="radio" name="shirt" value="1"> White<br> 
     <input onlick="checkRadio(this.value, this.name)" id="sh2" type="radio" name="shirt" value="0"> Yellow<br> 
     <input onlick="checkRadio(this.value, this.name)" id="sh3" type="radio" name="shirt" value="3"> Red<br> 
     <input onlick="checkRadio(this.value, this.name)" id="sh4" type="radio" name="shirt" value="5"> Other<br> 

</div> 


<div id="zodiac"> 

    <h2>Question #2: What is your Zodiac sign? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Scorpio<br> 
     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="0"> Capricorn<br> 
     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="3"> Gemini<br> 
     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Pisces<br> 

</div> 

<div id="saturday"> 

    <h2>Question #3: What do you see yourself doing on a Saturday? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="s1" type="radio" name="saturday" value="3"> Sleeping until noon<br> 
     <input onlick="checkRadio(this.value, this.name)" id="s2" type="radio" name="saturday" value="1"> Hitting the gym<br> 
     <input onlick="checkRadio(this.value, this.name)" id="s3" type="radio" name="saturday" value="5"> Shopping <br> 
     <input onlick="checkRadio(this.value, this.name)" id="s4" type="radio" name="saturday" value="1"> Hanging out with friends<br> 

</div> 

<div id="hunger"> 

    <h2>Question #4: How hungry are you? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="h1" type="radio" name="hunger" value="0"> Not really hungry at the moment<br> 
     <input onlick="checkRadio(this.value, this.name)" id="h2" type="radio" name="hunger" value="1"> I'm a little peckish<br> 
     <input onlick="checkRadio(this.value, this.name)" id="h3" type="radio" name="hunger" value="0"> I'm pretty hungry, now that you mention it<br> 
     <input onlick="checkRadio(this.value, this.name)" id="h4" type="radio" name="hunger" value="1"> I'm STARVING!<br> 
</div>  


    <button type="button" class="primaryBtn" onClick="alert(score)">Next</button> 

</form> 

</body> 

</html>` 
+0

jQuery 라이브러리를 사용하지 않는 이유는 무엇입니까? 그것은 꽤 쉽게 내가 :)^'우리에게 알려주십시오 - 최선을 다해 도와 드리겠습니다 –

+0

[jQuery를 통해 어떤 라디오 버튼이 선택되었는지 어떻게 알 수 있습니까?] (http://stackoverflow.com)/questions/596351/how-can-i-know-which-radio-button-is-jquery를 통해 선택) –

답변

0

지금이 당신의 작업 코드 (설명은 아래 참조) 모든

<!DOCTYPE html> 
<html> 
<head> 
    <link href="main.css" rel="stylesheet" > 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script>  

    var score = 0; 
    var a1, a2, a3, a4; 

function count(){ 

    a1 = $("#shirt input:checked").val(); 
    a2 = $("#zodiac input:checked").val(); 
    a3 = $("#saturday input:checked").val(); 
    a4 = $("#hunger input:checked").val(); 

    var score = parseInt(a1) + parseInt(a2) + parseInt(a3) + parseInt(a4); 
    alert(score); 
    if(score<=3) { 

    return("You should eat a banana.") 

} 
};  


</script> 

<style> 

    div { 
     border: 1px solid black; 
     background-color: #def2ed; 
     padding: 20px;  
     margin-left: auto; 
    } 
</style> 
</head> 
<body> 

    <form class = "quiz"> 


<div id="shirt"> 

    <h2>Question #1: What color shirt are you currently wearing? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="sh1" type="radio" name="shirt" value="1"> White<br> 
     <input onlick="checkRadio(this.value, this.name)" id="sh2" type="radio" name="shirt" value="0"> Yellow<br> 
     <input onlick="checkRadio(this.value, this.name)" id="sh3" type="radio" name="shirt" value="3"> Red<br> 
     <input onlick="checkRadio(this.value, this.name)" id="sh4" type="radio" name="shirt" value="5"> Other<br> 

</div> 


<div id="zodiac"> 

    <h2>Question #2: What is your Zodiac sign? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Scorpio<br> 
     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="0"> Capricorn<br> 
     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="3"> Gemini<br> 
     <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Pisces<br> 

</div> 

<div id="saturday"> 

    <h2>Question #3: What do you see yourself doing on a Saturday? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="s1" type="radio" name="saturday" value="3"> Sleeping until noon<br> 
     <input onlick="checkRadio(this.value, this.name)" id="s2" type="radio" name="saturday" value="1"> Hitting the gym<br> 
     <input onlick="checkRadio(this.value, this.name)" id="s3" type="radio" name="saturday" value="5"> Shopping <br> 
     <input onlick="checkRadio(this.value, this.name)" id="s4" type="radio" name="saturday" value="1"> Hanging out with friends<br> 

</div> 

<div id="hunger"> 

    <h2>Question #4: How hungry are you? </h2> 

     <input onlick="checkRadio(this.value, this.name)" id="h1" type="radio" name="hunger" value="0"> Not really hungry at the moment<br> 
     <input onlick="checkRadio(this.value, this.name)" id="h2" type="radio" name="hunger" value="1"> I'm a little peckish<br> 
     <input onlick="checkRadio(this.value, this.name)" id="h3" type="radio" name="hunger" value="0"> I'm pretty hungry, now that you mention it<br> 
     <input onlick="checkRadio(this.value, this.name)" id="h4" type="radio" name="hunger" value="1"> I'm STARVING!<br> 
</div>  


    <button type="button" class="primaryBtn" onClick="count();">Next</button> 

</form> 

</body> 

</html> 

첫째, 내 의견으로는 배울 수있는 초심자를 위해 훨씬 쉽게 jQuery를 선택기를 사용하려면 jQuery를 연결 . 구문은 $('SELECTOR_NAME').method();입니다. 각 div (#shirt, #zodiac 등)에 대해 확인 입력 필드 (input:checked)를 호출하여 val() 방법으로 값을 가져 왔습니다.

그런 다음 이들을 추가하기 위해 나는 parseInt(variable)을 문자열로 처리 했으므로 (예 : 5 + 1+ 3+ 1은 5131이 아니지만 10). parseInt은 번호를 매기므로 지금은 정말 멋지다.

+0

정말 고마워요! 너는 나의 성적을 저장했다! –

+0

@ Madison Renee 도와 드릴 수있어서 기쁩니다! 여기에있는 사회는 대부분의 시간을 도울 것입니다. 그래서 여러분이 우리에게 돌아 왔는지 확인하십시오 :-) 또한, 제 대답이 많은 도움이되고 코드에있는 버그를 이해하기에 충분할 정도로 깊이 설명했습니다 이 진드기를 사용하여 최선의 답변으로 선택하면 대답 할 수 있습니다. 이렇게하면 유사한 문제를 찾아 와서 다른 사용자가 올바른 대답을 찾는데 도움이됩니다. 좋은 하루 되세요! –

+0

@ Madison Renee 제발 내가 어떤 문제를 볼 수 있도록 당신이 브라우저에서 F12 바로 가기를 사용할 수 있도록 변경 되었습니까? 그리고 개발자의 Windows 콘솔에 관련된 오류가 있는지 확인하십시오. –

0

시도가 이런 식으로 각 라디오의 값을 얻을 :

document.querySelector('input[name="shirt"]:checked').value;

그래서, 대신 ID를 가지고, 당신은 각각에 이름을 지정해야 무선 입력 그룹.