按鈕onclick將不起作用

Question

在我的網站上，當我點擊開始考試按鈕，應該顯示一些元素。但是，只要我點擊它，元素就會顯示出來然後隱藏起來。 This is the site，這是控制onclick()事件的代碼：

// Display initial question 
$("#begin").click(function(){ 
    $("#quiz").removeClass("hidden"); 
    $("#intro").addClass("hidden"); 
    $("#prev").removeClass("hidden"); 
    $("#next").removeClass("hidden"); 
    $("#questionnum").removeClass("hidden"); 

    displayNext(); 
}); 

Answer 1

你可以這樣解決這個問題;

$("#begin").click(function(event){ 
    event.preventDefault(); 

    $("#quiz, #prev, #next, #questionnum").removeClass("hidden"); 
    $("#intro").addClass("hidden"); 

    displayNext(); 
}); 

或者，只要你可以修改你的「開始考試」按鈕來解決這個問題。如果你像這樣更新href屬性; href="javascript:;"，你可以解決這個問題。因爲，當你的空href屬性時，頁面將被刷新。您需要阻止此默認操作，或者您需要爲鏈接設置無用的href屬性。

Answer 2

的#begin是一個錨，所以你必須防止重定向到URL中使用e.preventDefault();href屬性默認動作，因爲現在刷新頁面時你點擊：

$("#begin").click(function(e){ 
    e.preventDefault(); 

    $("#quiz, #prev, #next, #questionnum").removeClass("hidden"); 
    $("#intro").addClass("hidden"); 

    displayNext(); 
}); 

注：您可以使用多個選擇逗號分隔符,。

希望這會有所幫助。

Answer 3

嘗試設置這樣的：

$("#begin").click(function(e){ 
e.preventDefault(); 
$("#quiz").removeClass("hidden"); 
$("#intro").addClass("hidden"); 
$("#prev").removeClass("hidden"); 
$("#next").removeClass("hidden"); 
$("#questionnum").removeClass("hidden"); 
displayNext(); 

});