Estoy tratando de hacer un generador de citas de anime. Actualmente haciendo un botón que debería compartir la cita del generador a Twitter. Sin embargo, al presionar el botón, no comparte la cotización en Twitter.
Ayuda se agradece como solucionarlo.
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>Veo tres problemas:
.text() en lugar de antes.$('#quote') en lugar de $('data.quote') . El objeto data solo existe dentro de la función fetch...then handler, también jQuery está diseñado para buscar objetos DOM, no busca ni usa variables en su código.Código mejorado:
function tweetQuote() { window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent($('#quote').text())); } Puede probarlo en el fragmento de código a continuación (excepto que usé console.log porque window.open no funciona en un fragmento, puede copiar la URL en una nueva ventana del navegador y luego debería funcionar).
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>