onfocus和onblur Javascript不能与Html一起使用

Question

我有一个html文件和一个javascript文件。

我基本上有一个字段可以在图像聚焦时改变图标的​​颜色，但是当它失去焦点时我无法将其恢复正常。请参阅图片以获取想法。

每个字段都有不同的功能集。

请参阅script.js

function chbgn(color) {
    var background = document.getElementById('iname');
    var icon = document.getElementById('user');
    background.style.backgroundColor = color;
    icon.style.color = "#FFFFFF";
}
function blur() {
    var background = document.getElementById('iname');
    var icon = document.getElementById('user');
    background.style.backgroundColor = "#EEEEEE";
    icon.style.color = "#000000";
}

这是第file.html行

<span class="icon-case" id="iname"><i class="fa fa-user" id="user"></i></span>
<input type="text" onfocus="chbgn('#3684FF');" onblur="blur();" id="name" name="name" placeholder="FULL NAME" style="width: 37%; margin-right: 50px;">

它显然适用于设置颜色但是取消它是一个谜。我不熟悉网站和Javascript。请帮忙。