向带有 Font Awesome 图标的按钮添加事件回调函数

Question

I have a search bar on my header that I made hidden by default with a button next to it to show/hide it depending on certain conditions. I made the button content using Font Awesome where I put a search icon if the search bar is hidden to indicate "show search", and a right chevron icon if the search bar is shown to indicate "hide search."

The way I wrote my js is so that upon clicking the button, if the event target contains certain classes, the search bar will show/hide and the problem is that the event target can be either the i element (Font Awesome) or the button element. This isn't a problem when clicking to show the search bar, but when clicking to hide it, I can't seem to get the callback function to trigger when the event target is the button element. I really hope I'm making sense.

Here's my JSFiddle -- https://jsfiddle.net/42uoLsrk/2/

function showHideSearch(e) {
    e.preventDefault;
    const searchBar = document.querySelector("#search");
    const searchButton = document.querySelector("#search-button");

    if (
        e.target.classList.contains("show-btn") ||
        e.target.classList.contains("fa-search")
    ) {
        searchBar.classList.add("show-search");
        searchButton.innerHTML = `<i class="fas fa-chevron-right"></i>`;
    } else if (
        e.target.classList.contains("fa-chevron-right") ||
        e.target.innerHTML == `<i class="fas fa-chevron-right"></i>`
    ) {
        searchBar.classList.remove("show-search");
        searchButton.innerHTML = `<i class="fas fa-search"></i>`;
    }
}

Line 24 in JS in particular is where I'm struggling:

e.target.innerHTML == `<i class="fas fa-chevron-right"></i>`

I feel like it really should work, since when the search bar is shown, the innerHTML of the button element is exactly that, but it's not working.

Thanks in advance.

Answer 1

I created an updated version of the jsfiddle here . I fixed a few things, first since you're only getting an element by I'd just use getElementById . Next the button will always have a fairly chance of being pressed regardless of whether you are closing or opening the input field, so you should create a variable that checks whether the input is open or closed. If it's open and the button is clicked close it and vice versa.

 const searchDiv = document.getElementById("search-div"); let open = false; // ADD EVENT LISTENERS searchDiv.addEventListener("click", showHideSearch); // FUNCTION: SHOW/HIDE SEARCH BAR ON BUTTON CLICK function showHideSearch(e) { e.preventDefault; const searchBar = document.querySelector("#search"); const searchButton = document.querySelector("#search-button"); if ( (e.target.classList.contains("show-btn") || e.target.classList.contains("fa-search")) && !open ) { searchBar.classList.add("show-search"); searchButton.innerHTML = `<i class="fas fa-chevron-right"></i>`; open = true; } else if ( ( e.target.classList.contains("fa-chevron-right") || e.target.id == "search-button") && open ) { searchBar.classList.remove("show-search"); searchButton.innerHTML = `<i class="fas fa-search"></i>`; open = false; } }

 /* GENERAL */ :root { --light-color: #ccc; --lighter-color: #f4f4f4; --dark-color: #333; --darker-color: #222; --brand-color: #ff4; --danger: #f44; --danger-dark: #c00; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--dark-color); color: var(--light-color); font-family: "Trebuchet MS"; } ul li { list-style: none; } button, input { outline: none; } /* UTILITY */ .highlight { color: var(--brand-color); } .show-search { width: 100% !important; border: black 2px solid; padding: 0.6rem 1rem; } /* HEADER */ header { background: var(--darker-color); display: flex; flex-direction: row; align-items: center; text-align: center; justify-content: space-between; padding: 1.8rem 6rem; width: 100%; } #logo { font-size: 2.4rem; font-weight: 200; } #search-div { width: auto; height: auto; display: flex; gap: 0.4rem; } .show-btn { padding: 0.6rem 0.7rem; background: var(--light-color); border-radius: 5px; border: none; transition: ease-in 300ms; font-size: 1.2rem; cursor: pointer; height: 100%; width: 3rem; } .show-btn:hover { background: var(--brand-color); transition: ease-in 300ms; } #search { width: 0; height: 100%; background: var(--lighter-color); color: var(--darker-color); font-size: 1.2rem; border-radius: 2px; transition: ease-in 300ms; border: none; }

 <head> <script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script> </head> <body> <header> <div id="logo-div"> <h1 id="logo"> <span class="highlight"><i class="fas fa-user-friends"></i></span> My<span class="highlight">Contact</span>List </h1> </div> <div id="search-div"> <button id="search-button" class="show-btn"><i class="fas fa-search"></i></button> <input id="search" type="text" placeholder="Search contacts..."> </div> </header></body>

If you require any more clarification please don't hesitate to ask.