Javascript 列表中的随机短语

标签 javascript html

对于我的网站,我试图制作一个按钮,每次按下按钮时都会出现不同的报价。我已经制作了一份单独的文件来做到这一点。我对 javascript 不太有经验,所以请帮忙。 这是我的 HTML:

    <button">Change Quote</button>
    <p id="test"></p>

我的目标是为每个报价提供一个从一到十的数值,因此它是随机的。另外,当我单击按钮时,p 会发生变化。谢谢。

编辑:有什么办法让它循环通过吗?例如,一旦我得到第一个报价,它可以转到第二个报价吗?

新的JS:

    var quotes = [
  "I am Bob",
  "I am smart",
  "I am independent",
  "I am bringing change",
];

document.getElementById("changeQuote").addEventListener("click", function() {
var q = quotes[ Math.floor( Math.random() * quotes.length ) ];
document.getElementById("test").innerHTML = q;  

再次感谢。

最佳答案

正如我的评论中提到的,将引号存储在一个数组中,然后添加一个从该数组中随机选择的点击处理程序。

给你的按钮一个id,这样就可以很容易地从JS中选择它:

<button id="changeQuote">Change Quote</button>

然后像这样,使用 Math.random() method :

var quotes = [
      "The quick brown fox jumps over the lazy dog.",
      "Look out! There are llamas!",
      "No, really, don't get up.",
      "Whatever",
      "Etc."    
    ];

document.getElementById("changeQuote").addEventListener("click", function() {
    var q = quotes[ Math.floor( Math.random() * quotes.length ) ];
    document.getElementById("test").innerHTML = q;     
});

演示:http://jsfiddle.net/9pqqmnrs/

进一步阅读:

关于Javascript 列表中的随机短语,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30962583/

相关文章:

html - 他们如何在右侧菜单上使用不透明度?

javascript - jQuery Masonry 与 JavaScript 生成的 HTML 不起作用

html - 如何制作 100% 高度的侧边栏覆盖页眉但同时不覆盖页脚

javascript - 可触摸屏幕中基于 Web 的项目的 block 缩放

javascript - 测试当某个元素失去焦点时哪个元素具有焦点

javascript - 如何在多个图像上应用 Canvas 转换

javascript - jQuery Mobile 动态输入范围 - 滑动事件不起作用

javascript - 填充每行前面的复选框,并使用 json 和 jquery 发送选中/未选中的值和 ID

javascript - "Javascript - The Definitive Guide"- 未捕获的类型错误 : trace(. ..) 不是函数

javascript - JavaScript中如何调用类函数?