Modern Front-End Development for Rails

Adding a Target

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 hidden to an element to hide it, and eventually we want to change the text of the button itself.

In a world without a framework, or in jQuery world, we would identify these elements using a DOM ID or DOM class. However, because those DOM attributes are also used to manage CSS styling, it can be confusing as to what DOM ID or class elements are styling and which are used by JavaScript.