2014-02-23 122 views
0

我收到了一個JavaScript onclick函數,它應該根據當前得分收聽特定的標記。這是一個測驗。 onlick函數監聽正確答案的點擊(擁有類的權利)。在beginnig中,函數應該聽到的正確答案是第一個具有類權限的標籤。在這個答案被點擊之後,函數應該被執行並且問題改變並且分數被提高1。現在這個函數應該聽第二個標籤和正確的類。我得到了一個變量score2,它始終是選擇正確的標籤所需的值,但它並不工作。
守則:多次使用相同的javascript函數

var score = 0 
var score2 = 0 
    document.getElementById("go").onclick = function() { 
    score++; 
    console.log(score); 
    console.log(score2); 
    document.getElementById("head").style.display="inline"; 
    document.getElementById("question0").style.display="none"; 
    document.getElementById("question1").style.display="block"; 
}; 

document.getElementsByClassName("right")[score].onclick = function(){ 
score++; 
score2++; 
//console.log(score); 
console.log(score2); 
document.getElementById("question"+score2).style.display="none"; 
document.getElementById("question"+score).style.display="inline"; 
}; 

和HTML(測驗是德國)

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <div id="body"> 
    <div id="inbody"> 
    <div id="question0"> 
     <h1> 
      WELCOME TO THE 100 QUESTION GAME! 
     </h1> 

     <h2 id="go" style="color:pink"> 
     Lets GO! 
    </h2> 
    <p> 
     by strawberry studios 
    </p> 

</div> 

<div id="head" style="display:none;"> 
    <h1>THE 100 QUESTION GAME</h1> 
</div> 


<div id="question1" style="display:none;"> 
    <h3> 
     Von wo aus kann man nur nach S&uuml;den gehen? 
    </h3> 
    <br> 
    <br> 
    <a id="questionOneAnswerOne" class="right">Nordpol</a> <br> <!--Richtig--> 
    <a id="questionOneAnswerTwo" class="wrong" href="http://100questiongame.tk/index.html">S&uuml;dpol</a> <br> 
    <a id="questionOneAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">&Auml;quator</a> <br> 
    <a id="questionOneAnswerFour" class="wrong" href="http://100questiongame.tk/index.html">Bayern</a> <br> 
</div> 

<div id="question2" style="display:none;"> 
    <h3> 
     Was ist am teuersten? 
    </h3> 
    <br> 
    <br> 
    <a id="questionTwoAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Diamant</a> <br> 
    <a id="quoestionTwonswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Platin</a> <br> 
    <a id="questionTwoAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">Gold</a> <br> 
    <a id="questionTwoAnswerFour" class="right">Osmium</a> <br> <!--Richtig--> 
</div> 

<div id="question3" style="display:none;"> 
    <h3> 
     Wof&uuml;r steht HTML? 
    </h3> 
    <br> 
    <br> 
    <a id="questionThreeAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Multiple Language</a> <br> 
    <a id="questionThreeAnswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Markup Language</a> <br> <!--Richtig--> 
    <a id="questionThreeAnswerThree" class="right">Hydrotecinmultiliquid</a> <br> 
    <a id="questionThreeAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Hype The Mother (a)lLong<a/> <br> 
</div> 

<div id="question4" style="display:none;"> 
    <h3> 
     Welche Farbe h&auml;tte Cola ohne Farbstoffe? 
    </h3> 
    <br> 
    <br> 
    <a id="questionFourAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Gelb</a> <br> 
    <a id="questionFouranswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Erdbraun</a> <br> 
    <a id="questionFourAnswerThree" class="right">Grün</a> <br> <!--Richtig--> 
    <a id="questionFourAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Türkis<a/> <br> 
</div> 

<div id="question5 "tyle="display:none;"> 

</div> 

<div id="question6" style="display:none;"> 

</div> 

<div id="question7" style="display:none;"> 

</div> 

<div id="question8" style="display:none;"> 

</div> 

<div id="question9" style="display:none;"> 

</div> 

<div id="question10" style="display:none;"> 

</div> 

<script type="text/javascript" src="javascript.js"></script> 
</div> 
</div> 
</body> 

http://100questiongame.tk測試代碼並進入https://floobits.com/BenBals/quiz.sublime-project到現場查看代碼爲我編輯。

回答

2

這是一個辦法做到這一點:

演示:http://jsfiddle.net/97gCk/3/

<div id="question1" style="display:none"> 
    <h3> 
     Von wo aus kann man nur nach S&uuml;den gehen? 
    </h3> 
    <br><br> 
    <a id="question1_1" onclick="nextQuestion(this)" href="#">Nordpol</a><br> 
    <a id="question1_2" class="wrong" href="..">S&uuml;dpol</a><br> 
    <a id="question1_3" class="wrong" href="..">&Auml;quator</a><br> 
    <a id="question1_4" class="wrong" href="..">Bayern</a><br> 
</div> 

JS

var score = 1; 

document.getElementById("go").onclick = function() { 
    document.getElementById("go").style.display="none"; 
    document.getElementById("question"+score).style.display="block"; 
}; 

function nextQuestion (el){ 
    el.style.color="green"; 
    document.getElementById("question"+score).style.display="none"; 
    score++; 
    document.getElementById("question"+score).style.display="inline";  
}; 
+0

,因爲我是新來的有什麼樣謝謝起作用。 – Ben

+0

不,沒有,只是寫你的消息評論海報或答案海報評論。 – LGSon

相關問題