javascript - JavaScript 中的搜索栏样式属性问题

Question

我制作了一个默认背景色为深色的简单搜索栏。在焦点上它将是白色的。单击框后，颜色发生变化，但是当我单击框外时，颜色仍然是白色。当我在框外单击时，颜色应该再次变暗。

jsFiddle link

Javascript

function searchbar()
{
searchbar=document.getElementById("searchbar");
searchbar.style.background="#fff";
}

CSS

#searchbar{
background: #666;
height: 25px;
width: 345px;
}
#search{
width: 300px; 
height: 25px;
float: left;
border: 0;
}
#searchicon{
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}
#searchadv{
color: #000;
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}
#search input[type="text"] {
background: #666;
height: 23px;
width: 295px;
border: 0;
}
#search input[type="text"]:focus {
background: #fff;
}

HTML

<div id="searchbar" onclick="searchbar()">
            <div id="search">
            <input type="text" placeholder="Search" />
            </div>
            <div id="searchicon">
                <img src="img/search.png" />
            </div>
            <div id="searchadv">
                <img src="img/down-arrow.png" />
            </div>   
        </div>

Answer 1

我发现问题是变量和函数不一样。当我更改函数名称时，它工作正常。 再次感谢大家回答我的问题。