Can anyone help me figure out why my button with an image isn't toggling a div's class in Chrome? It works fine in Firefox. Here is the codepen link for reference: https://codepen.io/luansergiomattos/pen/zydWyM
This is the HTML code:
<div class="bar" style="background-color: #474973; ">
<br />
<button id="searchButton">
<img
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png"
alt=""
style="width: 20px;"
/>
</button>
</div>
<div class="bar off but" id="search" style="background-color: #9CEAEF">
<form action="#">
<input
type="text"
placeholder="Search.."
name="search"
class="header__search"
/>
</form>
</div>
This is the JavaScript code:
var focused = document.querySelector('.header__search'), searchWrapper = document.querySelector('#search'),
searchInput = document.querySelector('#searchButton');
document.addEventListener('click', function (e) {
if (~e.target.className.indexOf('header__search')) {
searchWrapper.classList.remove('off');
focused.focus();
} else if (~e.target.id.indexOf('searchButton')) {
searchWrapper.classList.toggle('off');
focused.focus();
} else {
searchWrapper.classList.add('off');
}
});
Just to clarify, when I click the button, the intention is to toggle the visibility of the element by adding/removing a class named "off". Apologies for any errors in my explanation.