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>
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;
}
);
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.quotes.content wouldn't be interpolated.To make it work replace the line p.innerHtml = '"${quotes.content}"'; with p.textContent = `"${quotes.content}"`;