时间戳

首页 > 解决方案 > 在我的项目中（随机报价生成器）。我无法对问题进行排序？

javascript - 在我的项目中（随机报价生成器）。我无法对问题进行排序？

问题描述

我正在使用香草 javaScript 制作随机报价机项目。我正在使用 fetch-api(quotable.io) 和简单的 Dom 操作来做这个项目。我的代码是正确的，但有一些我无法识别的问题。

我的代码是：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Random.css">
    <title>Random Quotes Machines</title>
</head>
<body>
    <h1>Random Quotes </h1>
    <br> <br>
    <div class="container">
<p class="p">undefined </p>
<h6 class="author"> undefined</h6>
    </div>
    <button class="NextQuote" onclick="NextQuote()">NextQuote</button>
    <!-- <button class="previous">Previous</button> -->
    <script>

let container = document.getElementsByClassName("container");
let p = document.querySelector(".p");
let author = document.querySelector(".author");
let rem;
function NextQuote (){
rem = Math.floor(Math.random()*100);
 fetch('https://api.quotable.io/random')
 .then(response => response.json())
  .then(quotes => {
    p.innerHtml = '"${quotes.content}"';
   
  }  
    );
}

    

</script>
</body>
</html>

标签： javascripthtmlnode.jsfetch-apidom-manipulation

解决方案

您需要更改innerHtml为innerHTML.

并且您需要更改'"${quotes.content}"'为quotes.content.

结果将是：

fetch('https://api.quotable.io/random')
 .then(response => response.json())
  .then(quotes => {
    p.innerHTML = quotes.content;
      }  
    );

推荐阅读