Struggling with a Javascript problem where a button appears to be unresponsive when clicked. How can I fix this issue

Question

Struggling with a Javascript problem where a button appears to be unresponsive when clicked. How can I fix this issue

I'm facing an issue with a web interface I am designing for configuring remotes to control ESP32 functions. The problem seems to be related to the Javascript part of the interface, as the code on the ESP32 is working fine. Here's how it works: the interface has tabs where you can select different options by clicking on the menu items which then show or hide corresponding dividers.

There is a specific tab for remote configuration. Upon loading the page, a websocket command is sent to the controller to request the remote configuration data. Once the data is received, my Javascript inserts it into the divider as an HTML table list showing the paired remotes along with device information and buttons to edit or delete each one, as well as a back button.

Currently, the delete functionality is not implemented as I want to focus on getting everything else working smoothly first.

When clicking the edit button, a command is passed to the controller, which then loads a new table with editable data and a list of buttons associated with that particular remote.

The list of buttons also have edit and delete functionalities similar to the above, along with a back button.

The back button within the 'edit' function is causing me trouble. After navigating through editing a remote, then a button, and trying to go back, it seems to send an unnecessary edit button command.

The real issue lies in the flow of commands being sent when using the edit and back buttons, especially when multiple levels deep into editing remotes and buttons. It should not trigger an unnecessary edit button command.

To reproduce this problem without access to the controller, I have provided a link to a JSFiddle example below. I have also added alert messages to indicate what is happening at each step.

Any assistance in resolving this issue would be highly appreciated.

Link to JSFiddle example: https://jsfiddle.net/kb1sph/37epovwg/

My code is too long to include here, but I needed a snippet to add the JSFiddle link, so here's a placeholder snippet.

javascript button innerhtml divider

Answer 1

Answer №1

By delegating (targeting the button itself), there is no need to loop over the buttons.

An added benefit of this method is that if you add buttons later, the container will still handle the event.

This approach also prevents adding eventHandlers multiple times to the same buttons.

const remotegrid = document.getElementById('remotegrid');
remotegrid.addEventListener("click", (e) => {
  const tgt = e.target.closest("button"); // you can click anywhere on the button
  if      (tgt.matches(".remedit")) editrem(tgt);
  else if (tgt.matches(".btnedit")) editbtn(tgt);
  else if (tgt.matches(".remdel"))  delrem(tgt);
  else if (tgt.matches(".btndel"))  delbtn(tgt);
});

To simplify your code, consider loading fontawesome onto the device and using

<i class="fal fa-pencil"></i>

instead of SVG icons.

You could use even smaller code like:

 <button class='btnedit' title='Edit Button'>✎</button>
 <button class='btndel' title='Delete Button'>🗑</button>

Consider refactoring this function for improved readability and efficiency:

const ChangeTab = (evt, tabName) => {
  const currenttab = evt.currentTarget;
  document.querySelectorAll(".tabcontent")
    .forEach(content => content.style.display = "none");
  document.querySelectorAll(".tablinks")
    .forEach(tablink => tablink.classList.toggle("active",tablink === currenttab));
  document.getElementById(tabName).style.display = "grid";
};

Another enhanced event handler:

remotegrid.addEventListener("change", (e) => {
  const tgt = e.target;
  if (!tgt.matches("[name=remoteenabled]")) return; 
  SendCmd(`<RemoteEnabled MAC="${tgt.id}" Enabled="${tgt.value}"/>`);
});

Several improvements have been made in this updated version.

While some functionality may be affected, the code does not throw any errors. For further optimization, explore the use of template elements.

Answer 2

By delegating (targeting the button itself), there is no need to loop over the buttons.

An added benefit of this method is that if you add buttons later, the container will still handle the event.

This approach also prevents adding eventHandlers multiple times to the same buttons.

const remotegrid = document.getElementById('remotegrid');
remotegrid.addEventListener("click", (e) => {
  const tgt = e.target.closest("button"); // you can click anywhere on the button
  if      (tgt.matches(".remedit")) editrem(tgt);
  else if (tgt.matches(".btnedit")) editbtn(tgt);
  else if (tgt.matches(".remdel"))  delrem(tgt);
  else if (tgt.matches(".btndel"))  delbtn(tgt);
});

To simplify your code, consider loading fontawesome onto the device and using

<i class="fal fa-pencil"></i>

instead of SVG icons.

You could use even smaller code like:

 <button class='btnedit' title='Edit Button'>✎</button>
 <button class='btndel' title='Delete Button'>🗑</button>

Consider refactoring this function for improved readability and efficiency:

const ChangeTab = (evt, tabName) => {
  const currenttab = evt.currentTarget;
  document.querySelectorAll(".tabcontent")
    .forEach(content => content.style.display = "none");
  document.querySelectorAll(".tablinks")
    .forEach(tablink => tablink.classList.toggle("active",tablink === currenttab));
  document.getElementById(tabName).style.display = "grid";
};

Another enhanced event handler:

remotegrid.addEventListener("change", (e) => {
  const tgt = e.target;
  if (!tgt.matches("[name=remoteenabled]")) return; 
  SendCmd(`<RemoteEnabled MAC="${tgt.id}" Enabled="${tgt.value}"/>`);
});

Several improvements have been made in this updated version.

While some functionality may be affected, the code does not throw any errors. For further optimization, explore the use of template elements.

Struggling with a Javascript problem where a button appears to be unresponsive when clicked. How can I fix this issue

Answer №1

Similar questions

Adding the node_modules directory to a global npm package: A step-by-step guide

What is the best way to eliminate an object from an array of objects that fulfills a specific condition?

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

AngularJs throws an error: "Received an unexpected value when passing a number

Creating a callback function within stored procedures using JavaScript Language Integrated Query in documentDB: A step-by-step guide

Tips for preventing harmful messages in a chat room app

Working with ReactJS, Material-UI, and Javascript: Facing challenges in applying rounded borders to TableRow components

After a push to the router, scrolling is disabled

Upgrade to the most recent versions of packages using npm

Utilizing JQuery AJAX for Effortless Caching with PHP Endpoints

Creating interactive tooltips in Shiny applications with the help of ShinyBS

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Troubleshooting: Why isn't setMetadata working in NestJS from authGuards

Using asynchronous functions in React Native still generates a promise despite the presence of the 'await' keyword

Getting to the values within a JSON object that contains multiple arrays

Issue with Bing Maps Infobox mouseout event: Problem arises when attempting to change the htmlContent asynchronously

Experiencing difficulty when attempting to save a zip file to the C drive

Div element to animate and vanish in a flash

Angular 2: trigger a function upon the element becoming visible on the screen

Oops! Hardhat Test Error "Error: Virtual Machine Exception occurred while processing transaction: reverted with reason 'Please deposit additional funds'."