In my Project (Random quote generator). I am unable to sort issue?-CodePudding

I am making Random quote machine project using vanilla javaScript. I am doing this project using fetch-api(quotable.io) and simple Dom manipulation. My code is correct but there is some issues that I am unable to identify.

My Code is:

<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 >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>

CodePudding user response：

You need to change innerHtml to innerHTML.

And you need to change '"${quotes.content}"' to quotes.content.

The result would be:

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

CodePudding user response：

Your sample almost works. There are only some small issues in your code:

quotes.content contains a plain text, to add the text to the paragraph you could use p.textContent instead.
you are using simple quotes instead of backticks for the template string, so your variable quotes.content wouldn't be interpolated.

To make it work replace the line p.innerHtml = '"${quotes.content}"'; with p.textContent = `"${quotes.content}"`;