document.querySelector无法选中class元素 页面output节点未填充问题咨询

问题排查及解决方案 #

核心原因 #

• 你定义的ySearch函数没有被主动调用：浏览器加载JS文件时只会执行全局作用域下的代码，函数内部逻辑默认不会自动触发，所以赋值操作从来没有运行过。
• 字符串存在语法错误：你定义url变量时，字符串直接跨行没有做转义处理，属于JavaScript语法错误，会导致整个脚本执行中断，就算你调用函数也无法正常运行。

修复方案 #

如果你希望页面加载时直接显示url，修改app.js如下即可：

const api = 'xxxxxxxx';
// 用模板字符串处理长字符串，避免换行语法问题
const url = `https://www.googleapis.com/youtube/v3/search/?part=snippet&key=${api}&q=test&maxResults=20`;
// 直接执行赋值操作
document.querySelector('.output').textContent = url;

如果需要同时保留点击按钮触发更新的能力，可以补充绑定事件：

const api = 'xxxxxxxx';

function ySearch() {
  const url = `https://www.googleapis.com/youtube/v3/search/?part=snippet&key=${api}&q=test&maxResults=20`;
  document.querySelector('.output').textContent = url;
}

// 页面加载时执行一次
ySearch();
// 给按钮绑定点击事件，点击时也会更新
document.querySelector('button').addEventListener('click', ySearch);

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