Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36839

Re: Getting the index of a clicked element

Show key headers only | View raw

James Harris wrote:

> On 08/06/2019 06:57, JJ wrote:
>> On Fri, 7 Jun 2019 17:35:40 +0100, James Harris wrote:
>>> <div class = "question">Why?</div>
>>> <div class = "answer">Because</div>
>>>
>>> <div class = "question">When?</div>
>>> <div class = "answer">Soon</div>
>> 
>> With that HTML structure, you can setup the click event handler like
>> below.
>> 
>>    addEventListener("click", e => {

addEventListener must be called as method of the event target, not the 
global object.

>>      e = e.target;
>>      if (e.classList.contains("question")) {

This is actually insufficient, see below.

>>        e = e.nextElementSibling.style;
>>        e.display = e.display ? "" : "block";

Looking for siblings with script code and writing CSSOM code is unnecessary 
if you use the sibling *element* selector(s) of CSS with attached CSS rules.  
The latter is also much easier to maintain and less error-prone (a sibling 
*node* can be a text node, and text nodes do not have a “style” property; as 
a result, a TypeError exception is thrown on this line then).

In that regard, my code needs to be improved slightly so that it checks 
whether, if the object in question does not have a “classList” property (is 
not an element node), one of its ancestors has and its “class” attribute 
contains the pertinent class name.  There is this trade-off with event 
bubbling to find out the proper ancestor if a descendant was the event 
target; this problem does not exist if event listeners are being added to 
the proper ancestors directly, but then it has to be added to every single 
one of them.  Insofar using event bubbling this way might actually not 
always be the best strategy (speed tests pending; it is also situation-
dependent).

>>      }
>>    });
>> 
> 
> Good answer.

Rest assured that as a beginner you are not in any position to tell.

It is a striking feature of ECMAScript-based programming languages and their 
applications in particular that, because they seem comparably easy to learn, 
people very quickly become overconfident in their estimations of their own 
knowledge about them.  Some of them even take their hubris to writing more 
or less clueless books (Flanagan, Crockford, Resig).  There is a culture of 
cargo cult programming.  Blind leading the blind.

A quote (ignoring the wrong spelling, indication overgeneralization):

| > If you get a bunch of authors […] that state the same "best practices"
| > in any programming language, then you can bet who is wrong or right...
| Not with javascript. Nonsense propagates like wildfire in this field.
|   -- Richard Cornford, comp.lang.javascript, 2011-11-14
 
> Were there any browsers which supported JavaScript but not the .style
> property?

Yes.
 
> FWIW I got the system to work as I want it to. The complete code is
> below. Your answer may be better but I quite like what I came up with.

Whether *you* *like* it does NOT matter.  It must *work* for the 
*customer/user*.  That is the first rule of software development,
in particular of Web development where you have almost no idea
where and under which circumstances your code is going to run.

> I am not familiar with JavaScript so folks reading the code may find
> things they don't like or which could be better.

Again, it is not a matter of “like”.  There are valid *reasons* why it is 
being recommended to do some things one way and not the other ways.

> Feel free to criticise it.

Thanks, but no, thanks.  I have told you how to do this easily, efficiently, 
and in a backwards-compatible way. You decided to do it hopelessly 
complicated, inefficient, and in an incompatible way instead.  Now you have 
to live with the consequences.

> [convuluted mess]

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-07 17:35 +0100
  Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-07 17:59 +0100
    Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:33 +0200
      Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 01:43 -0700
  Re: Getting the index of a clicked element "R.Wieser" <address@not.available> - 2019-06-07 19:39 +0200
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 18:52 +0100
  Re: Getting the index of a clicked element Julio Di Egidio <julio@diegidio.name> - 2019-06-07 10:45 -0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 18:57 +0100
      Re: Getting the index of a clicked element Julio Di Egidio <julio@diegidio.name> - 2019-06-09 05:44 -0700
  Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:16 +0200
    Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 22:48 +0200
  Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:36 +0200
  Re: Getting the index of a clicked element JJ <jj4public@vfemail.net> - 2019-06-08 12:57 +0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 10:30 +0100
      Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 12:13 +0200
        Re: Getting the index of a clicked element John G Harris <niam@jghnorth.org.uk.invalid> - 2019-06-08 13:35 +0100
        Re: Getting the index of a clicked element John G Harris <niam@jghnorth.org.uk.invalid> - 2019-06-08 13:45 +0100
        Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 19:03 +0100
          Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 21:11 +0200
            Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 14:18 -0700
  Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 02:16 -0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 19:14 +0100
  Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-10 11:29 -0700
    Re: Getting the index of a clicked element "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-06-10 23:00 +0200
      Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-11 03:22 -0700

csiph-web