如何防止我的HTML按鈕刷新整個頁面？

Question

我建立了一個簡單的句子生成器 - 當你點擊一個HTML按鈕時，在它下面生成一個隨機句子。

但是，每次單擊按鈕時，整個頁面都會刷新。我該如何防止並簡單刷新按鈕下方的句子？

這裏的按鈕HTML：

<div class="wrap"> 

<center><button onclick="location.reload()">Click me</button></center> 

</div> 

，並在那裏出現的句子HTML：

<div class="container"> 

<h5></h5> 

</div> 

最後，這裏產生的句子（不知道這是否是相關的）的腳本：

<script> 
jQuery(document).ready(function() { 

    //declare arrays 
    var nouns = ['noun 1', 'noun 2']; 
    var clauses = ['clause 1']; 
    var names = ['name 1','name 2']; 
    var adjective = ['adjective 1'];  
    var reasons = ['reason 1'];  
    //shuffle through contents of each array, picking one entry per array 
    var randNoun = nouns[Math.floor(Math.random() * nouns.length)]; 
    var randName = names[Math.floor(Math.random() * names.length)]; 
    var randClause = clauses[Math.floor(Math.random() * clauses.length)]; 
    var randScandal = scandals[Math.floor(Math.random() * scandals.length)]; 
    var randReason = reasons[Math.floor(Math.random() * reasons.length)]; 
    //place the random entry into the appropriate place in the HTML 
    jQuery("h5").html(""); 
    jQuery("h5").append(randNoun + "&nbsp;"); 
    jQuery("h5").append(randClause + "&nbsp;"); 
    jQuery("h5").append(randName + "&nbsp;"); 
    jQuery("h5").append(randScandal + "&nbsp;"); 
    jQuery("h5").append(randReason); 

}); 

謝謝！

Answer 1

你應該把代碼中的函數：

function generate(){ 
    //declare arrays 
    var nouns = ['noun 1', 'noun 2']; 
    var clauses = ['clause 1']; 
    var names = ['name 1','name 2']; 
    var adjective = ['adjective 1'];  
    var reasons = ['reason 1'];  
    //shuffle through contents of each array, picking one entry per array 
    var randNoun = nouns[Math.floor(Math.random() * nouns.length)]; 
    var randName = names[Math.floor(Math.random() * names.length)]; 
    var randClause = clauses[Math.floor(Math.random() * clauses.length)]; 
    var randScandal = scandals[Math.floor(Math.random() * scandals.length)]; 
    var randReason = reasons[Math.floor(Math.random() * reasons.length)]; 
    //place the random entry into the appropriate place in the HTML 
    jQuery("h5").html(""); 
    jQuery("h5").append(randNoun + " "); 
    jQuery("h5").append(randClause + " "); 
    jQuery("h5").append(randName + " "); 
    jQuery("h5").append(randScandal + " "); 
    jQuery("h5").append(randReason); 
} 

然後調用按鈕，點擊該功能 HTML：

<center><button>Click me</button></center> 

JS：

jQuery(document).ready(function() { 
    jQuery('button').on('click', function(){ 
     generate(); 
     //or you can have all the code here without a function 
    }); 
}); 

Answer 2

只需將整個jQuery代碼放入一個函數中，代碼中的onclick="location.reload()就會加載整個頁面。刪除it.-

<script> function sentenceLoad() { 
       //declare arrays 
var nouns = ['noun 1', 'noun 2']; 
var clauses = ['clause 1']; 
var names = ['name 1','name 2']; 
var adjective = ['adjective 1'];  
var reasons = ['reason 1'];  
//shuffle through contents of each array, picking one entry per array 
var randNoun = nouns[Math.floor(Math.random() * nouns.length)]; 
var randName = names[Math.floor(Math.random() * names.length)]; 
var randClause = clauses[Math.floor(Math.random() * clauses.length)]; 
var randScandal = scandals[Math.floor(Math.random() * scandals.length)]; 
var randReason = reasons[Math.floor(Math.random() * reasons.length)]; 
//place the random entry into the appropriate place in the HTML 
jQuery("h5").html(""); 
jQuery("h5").append(randNoun + "&nbsp;"); 
jQuery("h5").append(randClause + "&nbsp;"); 
jQuery("h5").append(randName + "&nbsp;"); 
jQuery("h5").append(randScandal + "&nbsp;"); 
jQuery("h5").append(randReason); 

} 
    </script> 

在HTML，更換按鈕與 -

<button onclick="sentenceLoad()">Click me!</button>