2017-04-17 17 views
0

私はBuzzfeedスタイルのクイズを作ろうとしていますが、各回答の選択肢から値を取得してvar 'score'を加算するのに問題があります。私のスクリプトには機能しない半分の機能があります。私はちょうど脳の嵐に挑戦していた。配列を使うべきか、入力は大丈夫ですか?私はこれでかなり新しいので、あなたが笑える誤りを見るなら、私を許してください。ありがとう!だから、ラジオボタンからの値の取得(初心者の方)

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

、代わりにIDを持つのは、それぞれに名前を指定する必要があります:)

`

<!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/question/596351/how-can-i-know-which-radio-button-selected-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> 

まず、私は私の意見で学ぶことbegginerのためにはるかに簡単です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ショートカットを使うこともできます。 –

0

は、各ラジオの値をこのように取得しよう無線入力のグループ。

関連する問題