图片模糊切换功能开发遇Console.Log报错，寻求技术解决方案

嘿，我看到你在开发点击按钮切换图片模糊/清晰状态的功能时遇到了报错，咱们来拆解一下问题，一步步修复它！

首先看你代码里的几个关键错误： #

1. JavaScript 中的 DOM 选择器错误

document.querySelector() 方法返回的是匹配选择器的第一个单个元素，不是数组，所以你给它加 [0] 会直接得到 undefined，这就是控制台报错的核心原因！另外变量 c 没有声明，会变成全局变量，容易引发其他潜在问题。

修正后的 JavaScript 代码：

// 去掉[0]，直接获取单个元素
let btn = document.querySelector('.btnbl');
let img = document.querySelector('img');
// 声明变量c，避免全局污染
let c = 0;

function coverImage () {
 if( c === 0) {
 btn.innerHTML = 'Blur Image';
 img.style.filter = 'blur(0)';
 c = 1;
 } else {
 btn.innerHTML = 'Unblur Image';
 img.style.filter = 'blur(24px)';
 c = 0;
 }
}

2. CSS 中的 border-radius 属性写法错误

你写的 border-radius: 5px solid yellow; 是错误语法，border-radius 只负责设置圆角，边框样式需要用 border 属性单独定义：

修正后的 CSS 代码：

.blur{
 margin-top: 20px;
 display: flex;
 justify-content: center;
}
.blur img{
 width: 730px;
 height: 520px;
 filter: blur(0px);
}
.btnbl{
 position: absolute;
 top: 45px;
 right: 452px;
 padding: 7px;
 background-color: darkslategray;
/* 分开设置边框和圆角 */
 border: 5px solid yellow;
 border-radius: 5px;
 font-size: 20px;
 color: white;
 cursor: pointer;
 font-family: sans-serif;
}

3. HTML 代码（结构无需修改）

你的 HTML 结构没问题，按钮的 onclick 绑定也正确，确保图片路径可访问即可：

<div class="blur">
 <img src="https://4.bp.blogspot.com/_EZ16vWYvHHg/TFBW_zN6oaI/AAAAAAAAQd4/8UxrcXLQ5js/s1600/www.idool.net-Perrito.jpg">
 <button onclick="coverImage()" class="btnbl">Blur Image</button>
</div>

修复后的效果说明 #

现在点击「Blur Image」按钮，图片会变成模糊状态，按钮文字切换为「Unblur Image」；再次点击则恢复清晰，按钮文字切回原状态，控制台也不会再报错啦！

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