使用jQuery在HTML中显示var

Display var in HTML using jQuery

本文关键字：显示 var HTML jQuery 使用      更新时间：2023-09-26

我正在开发免费代码阵营的zipline"构建一个随机报价机"。我尝试过搜索和查看不同的教程，但似乎无法显示我的随机引用。我想我已经接近了，但经过几个小时的尝试，我想我会问专家的！我知道onClick是有效的，因为如果我把newQuote放在引号中，它会显示在我想要的位置，但我似乎没有正确调用变量。

$(document).ready(function() {
generator();
function generator() {
var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed  you 3 times"];
var newQuote = [Math.floor(Math.random() * quotes.length)]
}
$(".btn").on("click", function() {
$('#output').html(newQuote);
});
});


$(document).ready(function() {
   function generator() {
        var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed  you 3 times"];
        return quotes[Math.floor(Math.random() * quotes.length)];
   }
  
   $(".btn").on("click", function() {
        $('#output').html(generator());
   });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">btn</button>
<span id="output"></span>

您需要初始化然后设置值。

$(document).ready(function() {
  // Initialize then set variables
  var quotes;
  var newQuote;
  generator();
  // Sets the variables
  function generator() {
    quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed  you 3 times"];
    // Generate new random index to select
    newQuote = Math.floor(Math.random() * quotes.length);
  }
  // Each time the button with class 'btn' is clicked, generate a new quote
  // and change the output HTML
  $(".btn").on("click", function() {
    // Change quote values
    generator();
    // Output changes
    $('#output').html(quotes[newQuote]);
  });
});
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <button class="btn">button</button>
  <div id="output"></div>
</body>
</html>

试试这个

var newQuote = quotes[Math.floor(Math.random() * quotes.length)]

您没有看到结果，因为newQuote包含随机报价的索引

试试这个：

$(document).ready(function() {
    var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed  you 3 times"];
    $(".btn").on("click", function() {
        $('#output').html(quotes[Math.floor(Math.random() * quotes.length)]);
    });
});

我删除generator函数的原因是，如果保留它，那么var引号将是该函数的本地引号。不需要它。

最后一个关键是每次单击按钮时生成随机索引。

请在此处找到的工作示例

https://jsfiddle.net/dcxbuaev/

您错误地使用了newQuote变量

我认为第一个问题是您错过了数组的名称。。。

var newQuote = quotes[Math.floor(Math.random() * quotes.length)];

第二件事是，该函数似乎并不是真正必要的，您应该返回一个值，例如

return quotes[Math.floor(Math.random() * quotes.length)];

或者根本不用。。。

$(document).ready(function() {
  var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed  you 3 times"];   
  $(".btn").on("click", function() {
    var newQuote = quotes[Math.floor(Math.random() * quotes.length)];
    $('#output').html(newQuote);
  });
});

编辑：下面是函数返回值的示例。

$(document).ready(function() {
  function generateQuote() {
    var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed  you 3 times"];
    return quotes[Math.floor(Math.random() * quotes.length)];
  }
  $(".btn").on("click", function() {
    $('#output').html(generateQuote());
  });
});

$(document).ready(function() {
generator();
function generator() {
 var quotes = ["Never make permanent decisions", "Knowledge is having the right answer. Intelligence is asking the right question", "I am Strong, Because i’ve been weak", "Scientists have discovered a food that diminishes a woman’s sex drive by 90%…", "I may look calm, but in my head I’ve killed  you 3 times"];
var newQuote = [Math.floor(Math.random() * quotes.length)]
}
$(".btn").on("click", function() {
$('#output').html(newQuote.toString());
});
});
相关文章：