Path: csiph.com!weretis.net!feeder4.news.weretis.net!feeder5.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: "Christoph M. Becker" <cmbecker69@arcor.de>
Newsgroups: comp.lang.javascript
Subject: Re: addEventListener question
Date: Sun, 12 Aug 2018 19:38:14 +0200
Organization: solani.org
Lines: 45
Message-ID: <pkpra0$k4$1@solani.org>
References: <5b6dbba7$0$2957$e4fe514c@news.xs4all.nl> <XnsA93BC992626eejj99@194.109.6.166> <5b6ed658$0$2956$e4fe514c@news.xs4all.nl> <87zhxtxb4u.fsf@bsb.me.uk> <pkmroi$slk$1@solani.org> <2d0334bc-a32a-3be6-e0cd-fc55d7e7446c@PointedEars.de> <pkplrp$rrc$1@solani.org> <5205cdc9-fb48-884b-fe3a-88c6013824c4@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
X-Trace: solani.org 1534095488 644 127.0.0.43 (12 Aug 2018 17:38:08 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Sun, 12 Aug 2018 17:38:08 +0000 (UTC)
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:60.0) Gecko/20100101 Thunderbird/60.0
In-Reply-To: <5205cdc9-fb48-884b-fe3a-88c6013824c4@PointedEars.de>
Content-Language: de-DE
Cancel-Lock: sha1:+fawrxjhW23Wwf+B3bPLhGrFMMI=
X-User-ID: eJwFwQERADEIAzBLG9CWl8Px4F/CEjgvW0EwsFgROYIsjJMn51h8d9ajuekVjaGkptVfWQ/+XBCM
Xref: csiph.com comp.lang.javascript:35470

On 12.08.2018 at 18:42, Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
>
>> Yes, there are more changes needed for a single listener, but looking at
>> the HTML in the OP (and assuming that the textContent of the dt elements
>> is what should be displayed), I'd probably go this way.
> 
> Removing the “__nr” suffix from the class name is easy with one listener
> [although it it needs refinement and should not be done in the first place;
> .remove(className) exists]; but how do you propose, in a single “click”,
> listener, to determine the index of the link that has been clicked (here:
> “abc”)?
> 
> ISTM that this is only possible if there is some external property on the
> "link", e.g. an “id” attribute value, to contain that information.

Ah, it seems you're referring to Evertjan.'s code, while I'm referring
to Luuk's.  My following simplified solution[1] is somewhat speculative,
since it is based on some example HTML and an according script snippet,
but anyway:

    document.getElementById("csschart")
            .addEventListener("click", function (e) {
        var elt = e.target;
        while (elt && elt.tagName !== "DT") {
                while (elt.tagName !== "DD") {
                    elt = elt.parentNode;
            }
            elt = elt.previousElementSibling;
        }
        if (elt) alert(elt.textContent - 1);
    });

If the .textContent couldn't be used this way, it would still be
possible to walk through `#csschart dt` and set appropriate data-*
attributes, and to use these in the listener.

Disclaimer: the code is rather fragile, but the HTML could be changed,
and I wouldn't build a barchart with CSS anyway.

[1] see also <https://jsfiddle.net/bwy1x39d/9/>

-- 
Christoph M. Becker