toggle button

You can improve the code by simplifying the logic and avoiding direct manipulation of the innerHTML. Here's a cleaner version of your code using event delegation and a more concise approach:

import $ from "jquery";

$(document).ready(function () {
  $("#root").on("click", "#toggleButton", function () {
    const button = $(this);
    button.text(button.text() === "ON" ? "OFF" : "ON");
  });
});

And in your HTML, you can initially set the button text:

  ON

In this version:

1. We use event delegation by attaching the click event handler to the #root element. This way, you don't need to worry about dynamically created elements within #root.

2. We give the button an id (in this case, toggleButton) for easy selection and manipulation.

3. Inside the click event handler, we use the text() method to toggle the button text between "ON" and "OFF" without modifying the innerHTML directly.

By making these changes, the code is more maintainable and easier to understand.

import $ from "jquery";

$(document).ready(function(){
  $("#root").on("click", "button", function(){
    $(this).text(function(i, text){
      return text === "ON" ? "OFF" : "ON";
    });
  });

  // Initial state
  $("#root").append('ON');
});

Your code works fine for toggling the button between ON and OFF states. However, you can simplify it a bit by using a data attribute to keep track of the current state. Here's an updated version of your code:

import $ from "jquery";

$(document).ready(function(){
  const rootApp = $("#root");
  
  rootApp.click(function(){
    const button = rootApp.find('button');
    const currentState = button.attr('data-state');
    
    if (currentState === 'on'){
      button.text('OFF').attr('data-state', 'off');
    } else {
      button.text('ON').attr('data-state', 'on');
    }
  });
  
  // Initialize the button state
  rootApp.html('ON');
});