为Twitter按钮添加自定义文本的JavaScript实现问题

嘿，我帮你找出问题所在啦！你的代码里有两个关键的小错误，导致动态生成的Twitter按钮没有正常显示出来，下面给你详细说明并修复：

错误1：获取DOM元素时未处理集合类型 #

document.getElementsByClassName()返回的是HTMLCollection（元素集合），而不是单个DOM元素，直接对这个集合调用appendChild()会报错。因为页面里只有一个.custom-tweet-button，我们需要取集合里的第一个元素：

// 原代码
var tweetButton = document.getElementsByClassName("custom-tweet-button");
// 修改后
var tweetButton = document.getElementsByClassName("custom-tweet-button")[0];

错误2：window.onload的赋值方式错误 #

你当前的写法window.onload = generateTweetButton(customText);会立即执行generateTweetButton函数，而不是等页面加载完成后再执行。这时候DOM可能还没完全渲染，.custom-tweet-button元素还不存在，自然无法添加子元素。正确的做法是用匿名函数包裹，让它在页面加载完成后再执行：

// 原代码
window.onload = generateTweetButton(customText);
// 修改后
window.onload = function() {
  generateTweetButton(customText);
};

修复后的完整JavaScript代码 #

var customText = "This is some custom text";

function generateTweetButton(text) {
  // 取第一个匹配的元素
  var tweetButton = document.getElementsByClassName("custom-tweet-button")[0];
  var anchor = document.createElement('a');
  anchor.setAttribute("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text));
  anchor.setAttribute("target", "_blank");
  anchor.setAttribute("alt", "Tweet this pen");
  
  var iTag = document.createElement('i');
  iTag.setAttribute("class", "btn-icon");
  
  var span = document.createElement("span");
  span.setAttribute("class", "btn-text");
  span.textContent = "Tweet";
  
  anchor.appendChild(iTag);
  anchor.appendChild(span);
  tweetButton.appendChild(anchor);
  return tweetButton;
}

// 用匿名函数包裹，确保页面加载后执行
window.onload = function() {
  generateTweetButton(customText);
};

这样修改后，页面加载时就能正常生成带有自定义文本的Twitter按钮啦，和你手动写HTML的效果完全一致~

内容的提问来源于stack exchange，提问作者Steph