在Twitter上分享一句名言

我正在尝试制作一个动画报价生成器。目前正在制作一个按钮，该按钮应将生成器中的报价共享到Twitter。然而，当按下按钮时，它不会将qoute分享到Twitter。

帮助感谢如何解决它。

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>

我看到三个问题：

一个放错地方的右括号，它应该在.text()之后，而不是之前
jQuery选择器不正确，应该是$('#quote')而不是$('data.quote')。data对象只存在于fetch...then处理程序函数内部，而且jQuery是为查找DOM对象而构建的，它不在代码中查找或使用变量
URL参数需要进行URL编码，否则接收方可能会收到不完整的数据和/或垃圾数据

改进的代码：

function tweetQuote() {
window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent($('#quote').text()));
}

您可以在下面的代码段中尝试它(除了我使用console.log，因为window.open在代码段中不起作用，您可以将URL复制到一个新的浏览器窗口，然后它就会起作用(。

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>

相关内容

最新更新

热门标签：