从 JavaScript 在 HTML 中调用时不打印"id"



我正在做一项任务,我必须从一个随机数组中提取引号和名称,并将它们显示在我的HTML页面中。在一些填充文字下。无论出于什么原因,脚本都在运行并显示不同的id(一个简单的本地日期时间显示),但不是引号随机化器。如有任何帮助,我们将不胜感激。

HTML

    </head>
    <body>
    <h1>CIS  - 16W</h1>
<nav id="nav">
    <ul>
        <li><a href="../p1/assign1/">Home</a></li>
        <li><a href="../p1/assign2/">Assignment 2</a></li>
        <li><a href="../p1/assign3/">Assignment 3</a></li>
        <li><a href="../p1/assign4/">Assignment 4</a></li>
        <li><a href="../p1/assign5/">Assignment 5</a></li>
        <li><a href="../p1/assign6/">Assignment 6</a></li>
        <li><a href="../p1/assign7/">Assignment 7</a></li>
        <li><a href="../p1/fp/">Final Project</a></li>
    </ul>
</nav>
</body>
    <meta charset="utf-8">
        <meta name=“description” content=“description”>
        <meta name=“author” content=“your”>
        <link rel="stylesheet" href="../css/styles.css">
        <script src="../functions.js"></script>
<main>
    <p>My name is _____ and I am a junior here at the _____.<br>I'm very excited to get started and hone in my skills in the multimedia environment!
    </p>
    <p>I am taking this course to help not only fill the math requirment for a Bacholer of Science, but also to aid my Multimedia minor and Advertising major!</p>
    <span id="quote"></span>
    <span id="name"></span>

JavaScript

window.onload = function () {
setInterval(timeAndDate, 1000);
}

var quotes = [""How many cares one loses when one decides not to be something but to be someone."",
""If you want to test a man's character give him power."",
""I just hope that one day, perferably when we're both blind drunk, we can talk about it"",
""Why do you look so sad?'<br>'Because you speak to me in words and I look at you with feelings."",
""Courage is what it takes to stand up and speak. Courage is also what it takes to sit down and listen.""];
var names = ["-Coco Chanel", "-Abrham Lincoln", "-J. D. Salinger", "-Leo Tolstoy", "-Wiston Churchill"];
var arrIndex = Math.floor(Math.random() * (quotes.length));
function quoteGen() {
    var quoteAll = document.getElementById("quote");
    var namesAll = document.getElementById("name");
    quoteAll.innerHTML = quotes[arrIndex];
    namesAll.innerHTML = names[arrIndex];
    if (arrIndex > quotes.length-1) {
        arrIndex = 0;
    }
}

function timeAndDate() {
    var date = new Date();
    var n = date.toDateString();
    var time = date.toLocaleTimeString();
    document.getElementById('localDate').innerHTML = n + ' ' + time;
}

这里有两个问题,

  • 您没有调用正在更新报价的quoteGen,计时器需要调用quoteGen,但您调用的是timeAndDate,这就是为什么时间正在更新,而不是报价
  • 您需要在quoteGen中生成随机索引,以便每次调用都会获得一个新的随机值

window.onload = function() {
  setInterval(quoteGen, 1000);
}
var quotes = [""How many cares one loses when one decides not to be something but to be someone."",
  ""If you want to test a man's character give him power."",
  ""I just hope that one day, perferably when we're both blind drunk, we can talk about it"",
  ""Why do you look so sad?'<br>'Because you speak to me in words and I look at you with feelings."",
  ""Courage is what it takes to stand up and speak. Courage is also what it takes to sit down and listen.""
];
var names = ["-Coco Chanel", "-Abrham Lincoln", "-J. D. Salinger", "-Leo Tolstoy", "-Wiston Churchill"];
var idx;
function quoteGen() {
  //the looping is used to make sure that every call to quoteGen will update a new quote
  do {
    var arrIndex = Math.floor(Math.random() * (quotes.length));
  } while (idx == arrIndex);
  idx = arrIndex;
  var quoteAll = document.getElementById("quote");
  var namesAll = document.getElementById("name");
  quoteAll.innerHTML = quotes[arrIndex];
  namesAll.innerHTML = names[arrIndex];
}
<p>My name is _____ and I am a junior here at the _____.
  <br>I'm very excited to get started and hone in my skills in the multimedia environment!
</p>
<p>I am taking this course to help not only fill the math requirment for a Bacholer of Science, but also to aid my Multimedia minor and Advertising major!</p>
<span id="quote"></span>
<span id="name"></span>

您不会在任何地方调用quoteGen()。

最新更新