0

I'm new at a company with a web app featuring many millions of SLOC.

For some reason, when clicking on a textarea (in any browser), an associated radio button is de-selected.

I'm not sure what JavaScript is being triggered by the textarea onclick, and I'm started to wonder if unobtrusive code, while encapsulating code that is not directly related to the mark up, makes it overbearing to hunt down and break into critical sections of the source.

Is there a way using the Chrome developer console to break into the JavaScript that is deselecting the radio button? I've tried a couple options to no avail :(

Bonus: Is this a downside to unobtrusive JavaScript?

EDIT: Here is the HTML:

<div class='radio'>
    <label data-toggle='tooltip' title='Originated somewhere else.'>
    <input type='radio' id='q2023_r2320' name='q2023' value='2320'  Other />*Other</label>
    <br />
    <textarea id='q2023_r2320_text' name='q2023_r2320_text' style='width:80%;' rows='1' class='form-control'>
    </textarea>
</div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
micahhoover
  • 2,101
  • 8
  • 33
  • 53
  • Did you make sure the textarea is not inside a label tag with a for attribute for the radio button? – NoGray Oct 17 '14 at 19:20
  • 1
    You might be able to use Chrome dev tools' Event Listener Breakpoints, which set global breakpoints on any of a large list of supported event types. See [my answer here](http://stackoverflow.com/a/20890470/1883647) for how to set them up. You can probably set the Mouse > click one, then click on the textarea and start stepping through the code to see where it goes, which should lead you to what's listening for the click. From there you can hopefully figure out how the listener is attached in the first place, if you need to know that. – ajp15243 Oct 17 '14 at 19:31

2 Answers2

1

You can add a change event handler to the radio button, add a breakpoint inside there, when it gets hit look at the stack trace. Also, try doing a Ctrl-Shift-F in the Sources tab inside chrome dev tools and search for relevant hooks, such as the 'radio' and 'form-control' classes.

wired_in
  • 2,593
  • 3
  • 25
  • 32
1

There is a way to break on changes to a DOM element in Chrome Developer Tools. Navigate to your webpage in chrome, right click on the element you are interested in, and click Inspect Element. In the Chrome Dev tools window that opens, the DOM element should be selected. Right click again on that element in the Chrome Developer tools window and hover over the Break On context menu. You should see 3 choices - Subtree Modifications, Attribute Modifications and Node Removal. Since the radio button is being deselected, you can Break on Attribute Modification. Click on the textarea, and the chrome dev tools should hit the breakpoint, showing which piece of code modified the radio button attributes.

Scorpion-Prince
  • 3,574
  • 3
  • 18
  • 24