CSS与HTML关联失效排查、代码修复及编辑器选择咨询

一、CSS样式不加载的修复方法 #

你的CSS无法关联到元素的核心原因是HTML引入CSS的标签错误：

• 错误写法：<style src="styles.css"></style>
• 正确写法：用<link>标签引入外部CSS文件：

<link rel="stylesheet" href="styles.css">

另外确认styles.css文件和HTML文件在同一目录下，路径不匹配也会导致样式无法加载。

二、JS代码中的错误修复 #

你的JS代码存在多处语法和逻辑错误，会导致颜色切换功能失效：

1. 移除多余的import Math，Math是JavaScript全局内置对象，无需导入
2. 修正const function的语法错误，定义函数的正确方式二选一：

   // 方式1：函数声明
   function changeColor1() { ... }
   // 方式2：函数表达式
   const changeColor1 = function() { ... }
   

3. 修复changeColor2和changeColor3的逻辑错误，应该使用对应下标的colorValue：

   function changeColor2() {
       document.querySelector(".square2").style.background = colorValue[1];
       colorValue[1] = colorDecide()
   }
   function changeColor3() {
       document.querySelector(".square3").style.background = colorValue[2];
       colorValue[2] = colorDecide()
   }
   

4. 修复colorDecide函数的逻辑，应该从hexademical数组中取字符，而非直接拼接数字：

   function colorDecide() {
       let tempValue = "#"
       for (var i = 1; i <= 6; i++) {
           let x = Math.floor(Math.random() * 16)
           tempValue += hexademical[x]; // 改为取数组对应元素
       }
       return tempValue
   }
   

三、编辑器选择建议 #

• 如果你习惯轻量、快速的编辑体验，Sublime 3完全够用，搭配Emmet、Lint类插件就能满足这个调色板工具的开发需求
• 如果你后续要开发更复杂的前端项目，WebStorm的智能提示、实时错误检测、内置调试工具等功能会大幅提升开发效率，适合长期投入的前端开发工作

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