作为一个<p>文本显示自己每次点击JavaScript使用一系列引号

Change as an <p> text show itself every click with JavaScript using a series of quotes you have

本文关键字：JavaScript 一系列 自己 文本 一个 显示      更新时间：2023-09-26

这就是我的问题(我知道这可能是一个非常简单的问题，但我对JavaScript完全陌生)。所以我有一个引用列表。我需要一个脚本，每次用户点击窗口的一部分，它改变报价，根据我想要的时间顺序。然后当报价完成后重新启动。假设用户一打开页面，我有一个段落，quote1然后用户到处点击这就发生了同样的段落，得到quote2。

很难给出一个具体的答案，因为你留下了很多悬而未决的问题。但是，从概念上讲，以下是步骤:

  1. 注册一个点击事件处理程序，以便在所需的点击发生时调用代码。
  2. 当你的点击处理程序被调用时，你需要得到你想要改变的<p>标签的DOM对象。
  3. 然后，您需要获取下一个要显示的报价。假设，你会把这些存储在一个数组中你会保留一个索引你当前显示的数组位置这样你就可以得到下一个。如果你想让它在不同的页面加载中工作，那么你需要将索引存储在cookie中，以便它在这台计算机上的其他页面加载中持续存在。
    4. 一旦你有了DOM元素和引号，你只需要设置DOM元素的innerHTML属性来插入所需的引号。

如果你的HTML是:

<p id="theQuote">This is the first quote</p>

并且，你想要点击这个按钮来改变引号:

<button onclick="changeQuote()">Change Quote</button>

或者如果你想在页面的任何地方点击，你可以用这个作为你的body标签:

<body onclick="changeQuote()">

那么，你可以这样做:

var quoteIndex = 0;
var quotes = [
    "First Quote",
    "Second Quote",
    "Third Quote"
];
function changeQuote() {
    ++quoteIndex;
    if (quoteIndex >= quotes.length) {
        quoteIndex = 0;
    }
    document.getElementById("theQuote").innerHTML = quotes[quoteIndex];
}

如果您真的希望在页面的任何地方单击来旋转引号(这似乎不太可能是正确的设计)，那么您可以将单击处理程序分配给body标记。

试试这样:

<html>
<head>
<script type="text/javascript">
    var quotes = ["Quote 1", "Quote 2"]
    var index = 0;
    function updateQuote() {
        index = index + 1;
        if(index == quotes.length) {
            index = 0;
        }
        document.getElementById("myQuote").innerHTML = quotes[index];
    }
</script>
</head>
<body onClick="updateQuote(); return false;">
<p id="myQuote"></p>
</body>
</html>

你试过什么?

这里我使用jquery来编写更快的代码

var quotes = ["quote1","quote2"];
var current = 0;
function changeQuote(){
    if (current >= quotes.length) current = 0;
    document.getElementById("paragraph").innerHTML(quotes[current]);
    current++;
}
document.body.onclick = changeQuote;
相关文章：