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 + "&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
   });
});

如何阻止我的HTML按钮刷新整个页面？

2 个答案: