如何防止HTML按钮刷新整个页面

How do I prevent my HTML button from refreshing the entire page?

本文关键字：刷新 何防止 HTML 按钮      更新时间：2023-09-26

我构建了一个简单的句子生成器——当你点击一个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);
});

谢谢！

您应该将代码放在一个函数中：

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 + "&nbsp;");
    jQuery("h5").append(randClause + "&nbsp;");
    jQuery("h5").append(randName + "&nbsp;");
    jQuery("h5").append(randScandal + "&nbsp;");
    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
   });
});

只需将整个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>
相关文章：