如何防止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

只需将整个jquery代码放入函数中，代码上的onclick="location.reload()加载整个页面。

 <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>

Answer 2

您应该将代码放入函数中：

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
   });
});