Using an image tag within a button element causes functionality issues with JavaScript on Chrome

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.

Answer №1

This occurrence is caused by the image becoming the focal point in your click function - you can resolve it by disabling pointer events and then it should function properly :)

button img { pointer-events: none; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to utilize HTML5 input type number for hexadecimal values?

Are there any methods to customize the HTML5 form input type "number" to function with number systems other than decimal (base 10)? Specifically, I am interested in utilizing the capabilities of the number input type such as up/down arrows and browser va ...

Reinitializing the Qt Stylesheet seems to have no effect

Attempting to modify the style of a window and all its children using stylesheets. Each child is given a name using setObjectName, and the stylesheet uses these names to modify the style of the named widgets, along with a few exceptions. To achieve this, ...

Function cannot be executed through the onchange event handler

I am looking for a solution to track changes in the color of an option element and automatically change the color of the select element when an inactive environment is selected. For example, I want to mark inactive environments with the color #D4D4D4. Is t ...

Attempting to fetch the user's username using jQuery from the database

echo "<form method='post' action='regprocess.php' id='registerform'>"; echo '<fieldset class="register">'; echo"<h2>Register</h2>"; echo "<ul>"; ...

Unable to activate animation within a nested ngRepeat loop

I'm struggling to understand how to initiate animations within a nested ngRepeat using Angular. The CSS class ".test" is supposed to be animated. However, when I apply ".test" on the inner ngRepeat, it doesn't seem to work (Plunker): <div ng ...

Discovering the Windows Identifier of the Opener Window in Chrome via JavaScript

I recently opened a link in a new window and realized that the current window's ID is now the ID of the newer window. I'm curious if there is any method to determine the window ID of the original window (the opener) from the perspective of the ne ...

Issues with hover functionality on top navigation bar (CSS)

I encountered an issue with my HTML file. Being new to HTML, while creating a topbar for my static website here, I attempted to add a hover effect to it. However, the hover effect is only working correctly on the "search" and "cart" buttons (and partially ...

What do the letters enclosed in brackets signify?

I am currently working with a library known as Monet.js, and within the documentation, there are descriptions that look like this: Maybe[A].map(fn: A => B) : Maybe[B] I am unsure of what the letters inside the brackets stand for. Is there anyone who c ...

Sending a message to the parent window of the browser through a callback function in Internet Explorer version 11.0.x

Currently, I am working on developing a callback in my application that is responsible for opening a popup, executing some tasks, and then responding to the popup's opener window to indicate that the action has been completed. In order to communicate ...

Utilize the Math.log() function within an HTML document

I am attempting to incorporate a Math operation in an HTML page, but unfortunately it is not functioning as expected. Here is the code snippet that I have experimented with. Is there any solution to make this code operational? HTML code <div> < ...

Losing focus issue with Material-UI TextField occurs constantly with every onChange event

I am in the process of developing a new component: https://i.stack.imgur.com/czM9i.png This component will consist of an array of objects, each representing a prescription. Each object will include the medicine name selected from a dropdown and a text fi ...

Diagnosing circular JSON can be a challenging task

Encountering an issue in my error handler with the following message: Uncaught TypeError: Converting circular structure to JSON. I suspect that there might be an additional exception thrown within the JSON.stringify call leading to this error. It's p ...

What is the best way to update information in a mongoose document using the _id field?

Although it may sound like a typical question, I've already conducted research and couldn't find a solution. I'm currently working on developing a discord bot and I don't have much experience in this area. The issue I keep encountering ...

What is the best way to create a modal message box using AngularJS?

Here is some code that I need help with: <body> <div> xxx </div> <div id="error" ng-show="er.msg"> <div style="color: white; background-color: purple; height: 2rem; display: flex; align-items: ...

Infinite loop triggered by jQuery dropdown menu on page resize was causing an issue

I have been working on developing a navigation menu for a website that displays as a horizontal bar on larger screens, but transforms into a jQuery dropdown menu when the window width is less than 980px. During initial page load with a window width below ...

Encountering a problem with a Vue component error stating "Unable to convert undefined or null to object"

Encountering an error message "Cannot convert undefined or null to object" with this VueJs Slider. You can see it in action on this website (It's the first component on the page). The slider's functionality is working fine, but I'm looking ...

Javascript challenges for beginners in coding world

After running the code snippet, I encountered the following error messages: at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Fun ...

Creating adaptable background images with fullpage.js

I'm currently utilizing fullpage.js for parallax scrolling. I'm wondering if there's a way to make the background images adjust responsively when I resize my window. Check out the documentation here: https://github.com/alvarotrigo/fullPage. ...

What is the best way to make hyperlinks in impress.js?

Wanting to craft a visually stunning brochure for my client with the help of impress.js. I want to include a link on each slide that directs to the relevant page when clicked. Is it feasible to have a clickable link to each slide on every page as well? ...

The contents of a Javascript array are not appearing within a div element

I have developed a program that reads JSON data related to a concert event. The JSON file consists of an object named global, which includes details about the band name and venue. Additionally, there is a tickets object that contains information on all ava ...