笔记网站遇Uncaught ReferenceError及卡片样式异常问题求助

一、Uncaught ReferenceError: showMenu is not defined 错误解决 #

可能原因及修复方案： #

• 脚本加载顺序问题：PHP输出的HTML中调用showMenu的代码（如onclick="showMenu()"）在script.js加载前执行。
  修复：

  1. 将script.js的引用放在<head>标签中并添加defer属性，确保脚本在DOM解析完成后执行且不阻塞页面加载：

     <head>
       <!-- 其他头内容 -->
       <script src="script.js" defer></script>
     </head>
     

  2. 或者把script.js的引用放在调用showMenu的HTML元素之前。

• 函数作用域被限制：showMenu函数被包裹在局部作用域（如DOMContentLoaded回调、IIFE）中，导致全局无法访问。
  修复：

  1. 将showMenu定义在全局作用域：

     // script.js
     function showMenu() {
       // 你的函数逻辑
     }
     // 其他需要DOM加载完成的代码放在回调里
     document.addEventListener('DOMContentLoaded', function() {
       // ...
     });
     

  2. 或者在局部作用域中将函数挂载到全局对象：

     document.addEventListener('DOMContentLoaded', function() {
       window.showMenu = function() {
         // 你的函数逻辑
       };
     });
     

• 脚本路径错误：script.js的引用路径不正确，导致浏览器未加载到脚本。
  修复：打开浏览器控制台（F12）→ 切换到Network标签，刷新页面，检查script.js的状态码。如果是404，修正引用路径（比如调整相对路径层级）。

二、笔记卡片标题/描述/日期样式不生效解决 #

可能原因及修复方案： #

• CSS文件未正确加载：同脚本路径问题，检查Network标签中notes.css的状态码，若为404，修正引用路径。

• CSS选择器与HTML结构不匹配：PHP输出的元素类名/ID与CSS中的选择器不一致（包括拼写错误、大小写差异）。
  修复：

  1. 打开浏览器控制台→Elements标签，选中笔记卡片的标题元素，查看其class属性。
  2. 对比notes.css中的选择器，确保完全一致。例如PHP输出：

     <h3 class="note-title"><?php echo $note_title; ?></h3>
     

     则CSS中必须对应：

     .note-title {
       /* 样式规则 */
     }
     

• 样式被高优先级规则覆盖：内联样式、更具体的选择器（如#app .note-title）会覆盖你的样式。
  修复：

  1. 在Elements标签的Styles面板中，查看对应元素的样式，若你的样式被划掉，说明被其他规则覆盖。
  2. 提高选择器优先级，比如加上父元素的类：

     .note-card .note-title {
       /* 样式规则 */
     }
     

  （尽量避免使用!important，除非万不得已）

• HTML结构错误：PHP输出的标签嵌套错误，导致CSS选择器无法匹配目标元素。
  修复：在Elements标签中检查HTML结构，确认标题、描述、日期元素的嵌套层级符合CSS选择器的预期。

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