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

Groups > comp.lang.javascript > #35452 > unrolled thread

addEventListener question

Back to article view | Back to comp.lang.javascript

Contents

  addEventListener question Luuk <luuk@invalid.lan> - 2018-08-10 18:21 +0200
    Re: addEventListener question "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-08-11 00:04 +0200
      Re: addEventListener question Luuk <luuk@invalid.lan> - 2018-08-11 14:28 +0200
        Re: addEventListener question Ben Bacarisse <ben.usenet@bsb.me.uk> - 2018-08-11 14:53 +0100
          Re: addEventListener question "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-08-11 16:27 +0200
            Re: addEventListener question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-08-12 17:49 +0200
              Re: addEventListener question "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-08-12 18:05 +0200
                Re: addEventListener question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-08-12 18:42 +0200
                  Re: addEventListener question "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-08-12 19:38 +0200
                    Re: addEventListener question Julio Di Egidio <julio@diegidio.name> - 2018-08-12 11:12 -0700
                    Re: addEventListener question James Kirk <noneya.invalid@gmail.com> - 2018-08-12 22:36 -0400
                      Re: addEventListener question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-06 08:17 +0200
                  Re: addEventListener question "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-08-13 11:50 +0200
                  Re: addEventListener question Luuk <luuk@invalid.lan> - 2018-08-18 16:50 +0200
          Re: addEventListener question "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-08-11 16:58 +0200
            Re: addEventListener question Ben Bacarisse <ben.usenet@bsb.me.uk> - 2018-08-12 02:40 +0100
              Re: addEventListener question "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-08-12 09:07 +0200
          Re: addEventListener question Luuk <luuk@invalid.lan> - 2018-08-11 19:17 +0200
    Re: addEventListener question "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-08-11 16:30 +0200
      Re: addEventListener question Luuk <luuk@invalid.lan> - 2018-08-11 19:12 +0200
      Re: addEventListener question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-08-12 17:46 +0200
        Re: addEventListener question "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-08-12 18:06 +0200
          Re: addEventListener question "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-08-12 18:12 +0200
            Re: addEventListener question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-08-12 18:33 +0200
    Re: addEventListener question Luuk <luuk@invalid.lan> - 2018-08-18 17:01 +0200

Page 1 of 2  [1] 2  Next page →

#35452 — addEventListener question

I am trying to create a bar-graph with the code founde here:
http://www.htmldrive.net/items/show/754/Beautiful-CSS-Stack-Bar-Graphs

Considering this piece of HTML:
....
	<dl id="csschart">
		
		<dt>001</dt>
		<dd class="p22"><span><b>22</b></span></dd>
		<dd class="sub p10" ><span><b>10</b></span></dd>
		
		<dt>002</dt>
		<dd class="p45"><span><b>45</b></span></dd>
		<dd class="sub p35"><span><b>36</b></span></dd>	
		
....


and this piece of javascript:
  var links = document.getElementById('csschart').children;
  var index;
  var abc = -1;;
  for (index = 0; index < links.length; ++index) {
    if (links[index].innerHTML== links[index].innerText) { abc++; }
    links[index].addEventListener('click',function(e) {
	alert(abc);
  });
  }

When using the variable abc on the addEventListener, i always get the
same value returned (the number of bars in my graph...), which makes
sense, but...

I need, when clicked on this first bar, that a value '001' is returned,
and when clicked on second bar, a value of '002' is returned.

IRL: the values '001' and '002' can be totally different in real life!

[toc] | [next] | [standalone]

#35453

Luuk <luuk@invalid.lan> wrote on 10 Aug 2018 in comp.lang.javascript:

>      <dl id="csschart">
>           
>           <dt>001</dt>
>           <dd class="p22"><span><b>22</b></span></dd>
>           <dd class="sub p10" ><span><b>10</b></span></dd>
>           
>           <dt>002</dt>
>           <dd class="p45"><span><b>45</b></span></dd>
>           <dd class="sub p35"><span><b>36</b></span></dd>     
>           
> ....
> 
> 
> and this piece of javascript:
>   var links = document.getElementById('csschart').children;
>   var index;
>   var abc = -1;;

Nice, the ;;

You don't need abc, as it gats the same number as index.

>   for (index = 0; index < links.length; ++index) {
>     if (links[index].innerHTML== links[index].innerText) { abc++; }
>     links[index].addEventListener('click',function(e) {
>      alert(abc);

The final value is in abc when eventually clicked!

>   });
>   }
> 

Try adding a className with a serial number:

<dl id="csschart">
    <dt>001</dt>
    <dd class="p22">
        <span>
            <b>22</b>
        </span>
    </dd>
    <dd class="sub p10">
        <span>
            <b>10</b>
        </span>
    </dd>
    <dt>002</dt>
    <dd class="p45">
        <span>
            <b>45</b>
        </span>
    </dd>
    <dd class="sub p35">
        <span>
            <b>36</b>
        </span>
    </dd>
</dl>
<script>
    var links = document.getElementById('csschart').children;
    var index;
    for (index = 0; index < links.length; ++index) {
        links[index].classList.add("__nr" + index);
        links[index].addEventListener('click', function(e) {
            alert(this.classList.toString().replace(/.*__nr/, ''));
        });
    }
</script>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#35454

On 11-8-2018 00:04, Evertjan. wrote:
> Luuk <luuk@invalid.lan> wrote on 10 Aug 2018 in comp.lang.javascript:
> 
>>      <dl id="csschart">
>>           
>>           <dt>001</dt>
>>           <dd class="p22"><span><b>22</b></span></dd>
>>           <dd class="sub p10" ><span><b>10</b></span></dd>
>>           
>>           <dt>002</dt>
>>           <dd class="p45"><span><b>45</b></span></dd>
>>           <dd class="sub p35"><span><b>36</b></span></dd>     
>>           
>> ....
>>
>>
>> and this piece of javascript:
>>   var links = document.getElementById('csschart').children;
>>   var index;
>>   var abc = -1;;
> 
> Nice, the ;;
> 
> You don't need abc, as it gats the same number as index.
> 
>>   for (index = 0; index < links.length; ++index) {
>>     if (links[index].innerHTML== links[index].innerText) { abc++; }
>>     links[index].addEventListener('click',function(e) {
>>      alert(abc);
> 
> The final value is in abc when eventually clicked!
> 
>>   });
>>   }
>>
> 
> Try adding a className with a serial number:
> 
> <dl id="csschart">
>     <dt>001</dt>
>     <dd class="p22">
>         <span>
>             <b>22</b>
>         </span>
>     </dd>
>     <dd class="sub p10">
>         <span>
>             <b>10</b>
>         </span>
>     </dd>
>     <dt>002</dt>
>     <dd class="p45">
>         <span>
>             <b>45</b>
>         </span>
>     </dd>
>     <dd class="sub p35">
>         <span>
>             <b>36</b>
>         </span>
>     </dd>
> </dl>
> <script>
>     var links = document.getElementById('csschart').children;
>     var index;
>     for (index = 0; index < links.length; ++index) {
>         links[index].classList.add("__nr" + index);
>         links[index].addEventListener('click', function(e) {
>             alert(this.classList.toString().replace(/.*__nr/, ''));
>         });
>     }
> </script>
> 
> 

Ok, thanks, but i made a small modification, i like 'abc'... ;)


  var links = document.getElementById('csschart').children;
  var index;
  var abc = -1;
  for (index = 0; index < links.length; ++index) {
	if (links[index].tagName=='DT') { abc++; }
	links[index].classList.add("__nr" + abc);
    links[index].addEventListener('click',function(e) {
		alert(this.classList.toString().replace(/.*__nr/, ''));
  });
  }



Every bar has 3 elements, (one 'dt', follwed by 2 'dd' )
I need every bar to return 1 number, so i count the lines where:
(links[index].tagName=='DT')

[toc] | [prev] | [next] | [standalone]

#35455

Luuk <luuk@invalid.lan> writes:
<snip>
>> Luuk <luuk@invalid.lan> wrote on 10 Aug 2018 in comp.lang.javascript:
>> 
>>>      <dl id="csschart">
>>>           
>>>           <dt>001</dt>
>>>           <dd class="p22"><span><b>22</b></span></dd>
>>>           <dd class="sub p10" ><span><b>10</b></span></dd>
>>>           
>>>           <dt>002</dt>
>>>           <dd class="p45"><span><b>45</b></span></dd>
>>>           <dd class="sub p35"><span><b>36</b></span></dd>     

(The thanks are to Evertjan.)

> Ok, thanks, but i made a small modification, i like 'abc'... ;)
>
>
>   var links = document.getElementById('csschart').children;
>   var index;
>   var abc = -1;
>   for (index = 0; index < links.length; ++index) {
> 	if (links[index].tagName=='DT') { abc++; }
> 	links[index].classList.add("__nr" + abc);
>     links[index].addEventListener('click',function(e) {
> 		alert(this.classList.toString().replace(/.*__nr/, ''));
>   });
>   }

You appear to be using the class simply to get the right numeric string
into the function at execution time.  There are other, less contrived
ways to do that, but you already have the string, don't you, in the
<dt>...</dt> element?

Also, with the code as it is, you don't need fresh a listener function
every time.  You just need two of them, each used three times.  Of
course, in your final version that might not be the case -- I can only
go by what you have written so far.

Here's one approach:

 var links = document.getElementById('csschart').children;
 var listener;
 for (var index = 0; index < links.length; ++index) {
      if (links[index].tagName == 'DT') {
           listener = (function (num) {
                return function (e) { alert(num); }
           })(links[index].innerText);
      }
      links[index].addEventListener('click', listener);
  }

<snip>
-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#35456

On 11.08.2018 at 15:53, Ben Bacarisse wrote:

> Also, with the code as it is, you don't need fresh a listener function
> every time.  You just need two of them, each used three times.  […]

Actually, a *single* event listener for #csschart is sufficient.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#35464

Christoph M. Becker wrote:
> On 11.08.2018 at 15:53, Ben Bacarisse wrote:
>> Also, with the code as it is, you don't need fresh a listener function
>> every time.  You just need two of them, each used three times.  […]
> 
> Actually, a *single* event listener for #csschart is sufficient.

Actually, with the code as it is, you do need a new listener every time due
to the closure.  Otherwise all links will display the same when clicked.

Whether you create that listener with an IEFE or bind() is cosmetic.


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#35465

On 12.08.2018 at 17:49, Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
>
>> On 11.08.2018 at 15:53, Ben Bacarisse wrote:
>>
>>> Also, with the code as it is, you don't need fresh a listener function
>>> every time.  You just need two of them, each used three times.  […]
>>
>> Actually, a *single* event listener for #csschart is sufficient.
> 
> Actually, with the code as it is, you do need a new listener every time due
> to the closure.  Otherwise all links will display the same when clicked.

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.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#35469

Christoph M. Becker wrote:
> On 12.08.2018 at 17:49, Thomas 'PointedEars' Lahn wrote:
>> Christoph M. Becker wrote:
>>> On 11.08.2018 at 15:53, Ben Bacarisse wrote:
>>>> Also, with the code as it is, you don't need fresh a listener function
>>>> every time.  You just need two of them, each used three times.  […]
>>> Actually, a *single* event listener for #csschart is sufficient.
>> Actually, with the code as it is, you do need a new listener every time due
>> to the closure.  Otherwise all links will display the same when clicked.
> 
> 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.

    [“abc” is a terrible choice for an index identifier.
     *Never* make design decisions in programming only based on
     what *you* *like*.]


PointedEars
-- 
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
  -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

[toc] | [prev] | [next] | [standalone]

#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

[toc] | [prev] | [next] | [standalone]

#35471

On Sunday, 12 August 2018 19:38:14 UTC+2, Christoph M. Becker  wrote:

> 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);
>     });

That is even more inefficient (and obscure) than the original code.

- To find the DTs, the easiest assuming there are no nested lists was to get
the root node by id, then use getElementsByTagName, otherwise set classes
and use getElementsByClassName... 

- The function to attach to the DT's click can be just one function and
written separately (adding better structure and clarity) as it does not need
any specific closure: a reference to the target element of the event (which
here is the DT, but the 'this' reference could be used) then to its properties
indeed is easy enough to get.

HTH,

Julio

[toc] | [prev] | [next] | [standalone]

#35472

In-Reply-To: <pkpra0$k4$1@solani.org>
"Christoph M. Becker" <cmbecker69@arcor.de> wrote:

> On 12.08.2018 at 18:42, Thomas 'OftenWrong' Lahn wrote:

[snip]

>> 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.

[snip]

> 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.

[snip]

(function () {
 'use strict';
 document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#csschart").addEventListener("click", (e) => {
   var elm = e.target,
   index;
   if (elm.nodeName.match(/^dt$/i)) {
    index = [...document.querySelectorAll("#csschart>dt")].indexOf(elm);
    console.log("textContent:"+elm.textContent+"\nindex:"+index);
   }
  }, false);
 }, false);
}
());

-- 
James Kirk

[toc] | [prev] | [next] | [standalone]

#35563

James Kirk trolled:
> In-Reply-To: <pkpra0$k4$1@solani.org>
> "Christoph M. Becker" <cmbecker69@arcor.de> wrote:

Attribution line, not attribution novel.

>> On 12.08.2018 at 18:42, Thomas [insult] Lahn wrote:
>>> 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.
>> […]
>
> (function () {
>  'use strict';
>  document.addEventListener("DOMContentLoaded", () => {
>   document.querySelector("#csschart").addEventListener("click", (e) => {
>    var elm = e.target,
>    index;
>    if (elm.nodeName.match(/^dt$/i)) {
>     index = [...document.querySelectorAll("#csschart>dt")].indexOf(elm);

Very efficient, flexible, and compatible.  NOT.

(Did it not occur to you that something trivial like this had occurred to me
already, but that I had excluded it as a solution on grounds of … reason,
and therefore did not suggest it?)


PointedEars
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
  -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)

[toc] | [prev] | [next] | [standalone]

#35473

Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote on 12 Aug 2018 in 
comp.lang.javascript:

> Removing the "__nr" suffix from the class name is easy with one listener
> 

.. prefix ..

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#35519

On 12-8-2018 18:42, Thomas 'PointedEars' Lahn wrote:
> 
> 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.
> 
>     [“abc” is a terrible choice for an index identifier.
>      *Never* make design decisions in programming only based on
>      what *you* *like*.]
> 
> 
> PointedEars
> 

Of course i was using 'abc' on-purpose, yust to get your attention...

;)


Again, thanks to everyone with positive critics and/or suggestions on
this matter!

[toc] | [prev] | [next] | [standalone]

#35458

Ben Bacarisse <ben.usenet@bsb.me.uk> wrote on 11 Aug 2018 in 
comp.lang.javascript:

>  There are other, less contrived ways to do that

I will rather strive for contrivancy in Javascript,
the opposite of such being JQuery.

Contrived:

If you see something that seems fake since it was too perfectly planned out, 
call it contrived. If you can easily predict the final minutes of a made-
for-TV movie, then call it contrived.

The adjective contrived describes something that is artificially planned, 
especially in an obvious way, so it comes across as faked or forced. It's 
not just drama that can come off as contrived. Someone's speech habits, 
wardrobe, or even personality can seem contrived. Whenever someone appears 
as if he or she is "trying too hard," they might seem contrived, or the 
opposite of "natural."

<https://www.vocabulary.com/dictionary/contrived>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#35461

"Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:

> Ben Bacarisse <ben.usenet@bsb.me.uk> wrote on 11 Aug 2018 in 
> comp.lang.javascript:
>
>>  There are other, less contrived ways to do that
>
> I will rather strive for contrivancy in Javascript,
> the opposite of such being JQuery.
>
> Contrived:
>
> If you see something that seems fake since it was too perfectly planned out, 
> call it contrived. If you can easily predict the final minutes of a made-
> for-TV movie, then call it contrived.
>
> The adjective contrived describes something that is artificially planned, 
> especially in an obvious way, so it comes across as faked or forced. It's 
> not just drama that can come off as contrived. Someone's speech habits, 
> wardrobe, or even personality can seem contrived. Whenever someone appears 
> as if he or she is "trying too hard," they might seem contrived, or the 
> opposite of "natural."
>
> <https://www.vocabulary.com/dictionary/contrived>

I can't work out what your point is.  Did you think I did not know what
contrived means?

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#35462

Ben Bacarisse <ben.usenet@bsb.me.uk> wrote on 12 Aug 2018 in
comp.lang.javascript: 

> "Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:
> 
>> Ben Bacarisse <ben.usenet@bsb.me.uk> wrote on 11 Aug 2018 in 
>> comp.lang.javascript:
>>
>>>  There are other, less contrived ways to do that
>>
>> I will rather strive for contrivancy in Javascript,
>> the opposite of such being JQuery.
>>
>> Contrived:
>>
>> If you see something that seems fake since it was too perfectly planned
>> out, call it contrived. If you can easily predict the final minutes of
>> a made- for-TV movie, then call it contrived.
>>
>> The adjective contrived describes something that is artificially
>> planned, especially in an obvious way, so it comes across as faked or
>> forced. It's not just drama that can come off as contrived. Someone's
>> speech habits, wardrobe, or even personality can seem contrived.
>> Whenever someone appears as if he or she is "trying too hard," they
>> might seem contrived, or the opposite of "natural."
>>
>> <https://www.vocabulary.com/dictionary/contrived>
> 
> I can't work out what your point is. 

Good for you. I am not insulted or anything.

> Did you think I did not know what
> contrived means?

Hey, this is Usenet, I am responding to the group,
please don't think I am instructing you personally on the Queen's English.

Perhaps I couldn't quite work out what your! point was,
in striving for less constrivancy in my code.

Is that something to aim for?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#35460

On 11-8-2018 15:53, Ben Bacarisse wrote:
> Luuk <luuk@invalid.lan> writes:
> <snip>
>>> Luuk <luuk@invalid.lan> wrote on 10 Aug 2018 in comp.lang.javascript:
>>>
>>>>      <dl id="csschart">
>>>>           
>>>>           <dt>001</dt>
>>>>           <dd class="p22"><span><b>22</b></span></dd>
>>>>           <dd class="sub p10" ><span><b>10</b></span></dd>
>>>>           
>>>>           <dt>002</dt>
>>>>           <dd class="p45"><span><b>45</b></span></dd>
>>>>           <dd class="sub p35"><span><b>36</b></span></dd>     
> 
> (The thanks are to Evertjan.)
> 
>> Ok, thanks, but i made a small modification, i like 'abc'... ;)
>>
>>
>>   var links = document.getElementById('csschart').children;
>>   var index;
>>   var abc = -1;
>>   for (index = 0; index < links.length; ++index) {
>> 	if (links[index].tagName=='DT') { abc++; }
>> 	links[index].classList.add("__nr" + abc);
>>     links[index].addEventListener('click',function(e) {
>> 		alert(this.classList.toString().replace(/.*__nr/, ''));
>>   });
>>   }
> 
> You appear to be using the class simply to get the right numeric string
> into the function at execution time.  There are other, less contrived
> ways to do that, but you already have the string, don't you, in the
> <dt>...</dt> element?


The HTML/CSS came from an example i found on the internet.
This example seemes (seemed?) to be a good way to display a bar-chart.

The data for this bar-chart will, in the end, be dynamically created.
So, you are right i should put the class in with the correct name, and
than i will not be needing the 'abc'


> 
> Also, with the code as it is, you don't need fresh a listener function
> every time.  You just need two of them, each used three times.  Of
> course, in your final version that might not be the case -- I can only
> go by what you have written so far.
> 
> Here's one approach:
> 
>  var links = document.getElementById('csschart').children;
>  var listener;
>  for (var index = 0; index < links.length; ++index) {
>       if (links[index].tagName == 'DT') {
>            listener = (function (num) {
>                 return function (e) { alert(num); }
>            })(links[index].innerText);
>       }
>       links[index].addEventListener('click', listener);
>   }
> 
> <snip>
> 

More studying to be done needs to be.

Thanks all for the input so far!

[toc] | [prev] | [next] | [standalone]

#35457

On 10.08.2018 at 18:21, Luuk wrote:

> Considering this piece of HTML:
> ....
> 	<dl id="csschart">
> 		
> 		<dt>001</dt>
> 		<dd class="p22"><span><b>22</b></span></dd>
> 		<dd class="sub p10" ><span><b>10</b></span></dd>
> 		
> 		<dt>002</dt>
> 		<dd class="p45"><span><b>45</b></span></dd>
> 		<dd class="sub p35"><span><b>36</b></span></dd>	
> 		
> ....
> 
> 
> and this piece of javascript:
>   var links = document.getElementById('csschart').children;
>   var index;
>   var abc = -1;;
>   for (index = 0; index < links.length; ++index) {
>     if (links[index].innerHTML== links[index].innerText) { abc++; }

I'd prefer (assuming HTML):

      if (links[index].tagName === "DT") { abc++; }

>     links[index].addEventListener('click',function(e) {
> 	alert(abc);
>   });
>   }

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#35459

On 11-8-2018 16:30, Christoph M. Becker wrote:
> On 10.08.2018 at 18:21, Luuk wrote:
> 
>> Considering this piece of HTML:
>> ....
>> 	<dl id="csschart">
>> 		
>> 		<dt>001</dt>
>> 		<dd class="p22"><span><b>22</b></span></dd>
>> 		<dd class="sub p10" ><span><b>10</b></span></dd>
>> 		
>> 		<dt>002</dt>
>> 		<dd class="p45"><span><b>45</b></span></dd>
>> 		<dd class="sub p35"><span><b>36</b></span></dd>	
>> 		
>> ....
>>
>>
>> and this piece of javascript:
>>   var links = document.getElementById('csschart').children;
>>   var index;
>>   var abc = -1;;
>>   for (index = 0; index < links.length; ++index) {
>>     if (links[index].innerHTML== links[index].innerText) { abc++; }
> 
> I'd prefer (assuming HTML):
> 
>       if (links[index].tagName === "DT") { abc++; }

OK , i will add the (third) '='

> 
>>     links[index].addEventListener('click',function(e) {
>> 	alert(abc);
>>   });
>>   }
> 

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web