Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

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

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 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>
7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

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;
      }  
    );
7 months ago · Juan Pablo Isaza Report

0

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

  1. quotes.content contains a plain text, to add the text to the paragraph you could use p.textContent instead.
  2. 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}"`;

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.