I'm trying to make an anime quote generator. Currently making a button that should share the quote from the generator to Twitter. However when pressing the button it doesn't share the qoute to Twitter.
Help appreciated how to solve it.
const api = "https://animechan.vercel.app/api/random";
const anime = document.getElementById("anime");
const quote = document.getElementById("quote");
const character = document.getElementById("character");
const btn = document.getElementById("btn");
document.getElementById("twitter")
btn.addEventListener("click", getQuote);
twitter.addEventListener("click", tweetQuote);
function getQuote() {
fetch(api)
.then((res) => res.json())
.then((data) => {
anime.innerHTML = `"${data.anime}"`;
quote.innerHTML = `"${data.quote}"`;
character.innerHTML = `- ${data.character}`;
btn.classList.remove("loading");
btn.innerText = "New Quote";
});
}
function tweetQuote() {
window.open("https://twitter.com/intent/tweet?text="+$('data.quote')).text();
}<title>Anime Quote Generator 💬</title>
</head>
<body>
<div class="container">
<div class="quote-box">
<h2 id="anime">Anime</h2>
<br>
<p id="quote">"Quote goes here..."</p>
<small id="character">- Character</small>
</div>
<button id="btn">New Quote</button>
<br>
<button id="twitter">TWEET</button>
</div>
<script src="javascript.js"></script>
</body>
</html>I see three issues:
.text() instead of before it.$('#quote') instead of $('data.quote'). The data object only exists inside the fetch...then handler function, also jQuery is built to look for DOM objects, it does not look for or use variables in your code.Improved code:
function tweetQuote() {
window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent($('#quote').text()));
}
You can try it in the below code snippet (except I used console.log because window.open does not work in a snippet, you can copy the URL to a new browser window and then it should work).
const api = "https://animechan.vercel.app/api/random";
const anime = document.getElementById("anime");
const quote = document.getElementById("quote");
const character = document.getElementById("character");
const btn = document.getElementById("btn");
document.getElementById("twitter")
btn.addEventListener("click", getQuote);
twitter.addEventListener("click", tweetQuote);
function getQuote() {
fetch(api)
.then((res) => res.json())
.then((data) => {
anime.innerHTML = `"${data.anime}"`;
quote.innerHTML = `"${data.quote}"`;
character.innerHTML = `- ${data.character}`;
btn.classList.remove("loading");
btn.innerText = "New Quote";
});
}
function tweetQuote() {
console.log("https://twitter.com/intent/tweet?text=" + encodeURIComponent($('#quote').text()));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Anime Quote Generator 💬</title>
</head>
<body>
<div class="container">
<div class="quote-box">
<h2 id="anime">Anime</h2>
<br>
<p id="quote">"Quote goes here..."</p>
<small id="character">- Character</small>
</div>
<button id="btn">New Quote</button>
<br>
<button id="twitter">TWEET</button>
</div>
<script src="javascript.js"></script>
</body>
</html>