随机名言生成器：无法将生成的名言发布至Twitter问题求助

嘿，我来帮你排查这个问题！你遇到的Uncaught ReferenceError: data is not defined错误，核心原因是**data变量的作用域不对**——你在获取名言的函数里定义的data，只有那个函数内部能访问到，Tweet按钮的点击事件函数根本拿不到它。

问题分析 #

你点击“Get another quote”能正常获取名言，说明调用API和处理返回数据的逻辑是没问题的。但data是在API请求的回调函数（比如then()里面的函数）里的局部变量，当你点击Tweet按钮时，这个变量已经不在当前作用域里了，所以会报错。

两种解决方案 #

下面给你两种实用的解决办法，选哪种都可以：

方案一：用全局变量存储名言数据

把存储名言的变量声明在全局作用域，这样所有函数都能访问到：

// 先声明一个全局变量，用来存名言数据
let currentQuoteData = null;

// 获取名言的函数
function getQuote() {
  fetch('你的API地址')
    .then(response => response.json())
    .then(data => {
      // 把数据赋值给全局变量
      currentQuoteData = data;
      // 把名言显示到页面
      document.getElementById('quote-text').textContent = data.quote;
      document.getElementById('quote-author').textContent = data.author;
    });
}

// Tweet按钮的点击事件
document.getElementById('tweet-btn').addEventListener('click', function() {
  // 先判断有没有获取到名言
  if (!currentQuoteData) {
    alert('请先获取一条名言再分享哦！');
    return;
  }
  // 构造Twitter分享链接
  const tweetUrl = `https://twitter.com/intent/tweet?text="${currentQuoteData.quote}" - ${currentQuoteData.author}`;
  // 打开新窗口分享
  window.open(tweetUrl, '_blank');
});

方案二：用DOM元素的data-*属性存储数据（更推荐）

这种方法不用全局变量，把名言数据存在显示名言的DOM元素上，更符合前端开发的最佳实践：

// 获取名言的函数
function getQuote() {
  fetch('你的API地址')
    .then(response => response.json())
    .then(data => {
      const quoteEl = document.getElementById('quote-text');
      const authorEl = document.getElementById('quote-author');
      // 更新页面显示
      quoteEl.textContent = data.quote;
      authorEl.textContent = data.author;
      // 把数据存在DOM的data属性里
      quoteEl.dataset.quote = data.quote;
      authorEl.dataset.author = data.author;
    });
}

// Tweet按钮的点击事件
document.getElementById('tweet-btn').addEventListener('click', function() {
  const quoteEl = document.getElementById('quote-text');
  const authorEl = document.getElementById('quote-author');
  // 从DOM属性里取出数据
  const quote = quoteEl.dataset.quote;
  const author = authorEl.dataset.author;
  
  if (!quote || !author) {
    alert('请先获取一条名言再分享哦！');
    return;
  }
  // 构造分享链接并打开
  const tweetUrl = `https://twitter.com/intent/tweet?text="${quote}" - ${author}`;
  window.open(tweetUrl, '_blank');
});

为什么这样能解决问题？ #

原来的data是回调函数里的局部变量，函数执行完就会被销毁，外面的代码根本访问不到。通过上面两种方法，我们把名言数据存到了全局作用域或者DOM元素上，这样Tweet按钮的点击事件就能顺利拿到需要的数据啦。

内容的提问来源于stack exchange，提问作者G.Spina