Adding a Target
Explore how to mark and manage DOM elements as targets within Stimulus controllers to toggle visibility and modify elements without manual event handling. Understand the syntax differences between JavaScript and TypeScript setups, and see how this improves clarity and code simplicity in Rails front-end development.
We'll cover the following...
Targetting DOM elements
In client-side coding, it is fairly common to have to mark a particular DOM element as being of interest to the code. Typically this means either you are reading the DOM element’s state to determine what to do or you are changing the DOM element’s state as a result of some other event. In our case, it’s the latter: we want to add the DOM class is-hidden to an element to hide it, and eventually we want to change the text of the button itself.
In the framework-less world, or in jQuery world, we would typically identify these elements using a DOM ID or DOM class. However, since those DOM attributes are also used to manage CSS styling, it can be confusing as to what DOM ID or class elements are ...