自定义YouTube卡片JavaScript输入不生效及代码修复请求

一、解决用户输入无法更新页面元素的问题 #

• 正确操作DOM元素：别直接用变量赋值（比如video_time=user_video_time），要先通过querySelector拿到目标元素，再修改它的内容。示例：

  // 获取显示视频时长的元素
  const videoTimeElement = document.querySelector('.video-time');
  // 将用户输入的值更新到页面
  videoTimeElement.textContent = user_video_time;
  

• 确保代码执行时机正确：如果代码在DOM还没渲染完成就运行，会导致获取不到元素，赋值自然无效。把代码放进DOMContentLoaded事件里：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有操作逻辑（比如绑定输入事件、初始化内容）都放在这里
  });
  

• 检查输入事件绑定：如果是用户输入触发更新，要确保输入框的事件监听正确绑定。比如监听input事件实时更新：

  const timeInput = document.querySelector('#user-time-input');
  timeInput.addEventListener('input', function() {
    const userInput = this.value;
    document.querySelector('.video-time').textContent = userInput;
  });
  

二、修复播放量格式化代码错误 #

以下是能正确处理不同量级播放量的格式化函数，自动转换为K/M/B格式：

function formatViews(views) {
  if (views >= 1000000000) {
    return (views / 1000000000).toFixed(1) + 'B';
  } else if (views >= 1000000) {
    return (views / 1000000).toFixed(1) + 'M';
  } else if (views >= 1000) {
    return (views / 1000).toFixed(1) + 'K';
  }
  return views.toString();
}
// 使用示例
const rawViews = 987654;
document.querySelector('.video-views').textContent = formatViews(rawViews); // 输出987.7K

如果不需要保留小数位，把toFixed(1)改成toFixed(0)即可。

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