experchange > javascript

Luuk (08-10-18, 06:21 PM)
I am trying to create a bar-graph with the code founde here:


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!
Evertjan. (08-11-18, 12:04 AM)
Luuk <luuk> wrote on 10 Aug 2018 in comp.lang.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>
Luuk (08-11-18, 02:28 PM)
On 11-8-2018 00:04, Evertjan. wrote:
[..]
> });
> }
> </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')
Ben Bacarisse (08-11-18, 03:53 PM)
Luuk <luuk> writes:
<snip>

(The thanks are to Evertjan.)

[..]
> 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>
Christoph M. Becker (08-11-18, 04:27 PM)
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 (08-11-18, 04:30 PM)
On 10.08.2018 at 18:21, Luuk wrote:

[..]
> 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++; }
[..]
Evertjan. (08-11-18, 04:58 PM)
Ben Bacarisse <ben.usenet> 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>
Luuk (08-11-18, 07:12 PM)
On 11-8-2018 16:30, Christoph M. Becker wrote:
> On 10.08.2018 at 18:21, Luuk wrote:
> I'd prefer (assuming HTML):
> if (links[index].tagName === "DT") { abc++; }


OK , i will add the (third) '='
[..]
Luuk (08-11-18, 07:17 PM)
On 11-8-2018 15:53, Ben Bacarisse wrote:
> Luuk <luuk> writes:
> <snip>
> (The thanks are to Evertjan.)
> 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'

[..]
> links[index].addEventListener('click', listener);
> }
> <snip>


More studying to be done needs to be.

Thanks all for the input so far!
Ben Bacarisse (08-12-18, 03:40 AM)
"Evertjan." <exxjxw.hannivoort> writes:

[..]
> 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?
Evertjan. (08-12-18, 09:07 AM)
Ben Bacarisse <ben.usenet> wrote on 12 Aug 2018 in
comp.lang.javascript:

> "Evertjan." <exxjxw.hannivoort> writes:
> 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?
Thomas 'PointedEars' Lahn (08-12-18, 05:46 PM)
Christoph M. Becker wrote:
> On 10.08.2018 at 18:21, Luuk wrote:
>> if (links[index].innerHTML== links[index].innerText) { abc++; }

> I'd prefer (assuming HTML):
> if (links[index].tagName === "DT") { abc++; }


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

or

Array.from(links).forEach((link) => {
/* */
if (link.tagName.toUpperCase() == "DT") { ++abc; }
/* */
});

Both assuming either ES 6 (2015) support on the clients or a transpiler like
Babel to make the code ES 5 (2009)-compliant.

PointedEars
Thomas 'PointedEars' Lahn (08-12-18, 05:49 PM)
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
Christoph M. Becker (08-12-18, 06:05 PM)
On 12.08.2018 at 17:49, Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
> 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 (08-12-18, 06:06 PM)
On 12.08.2018 at 17:46, Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
> const LINK = links[index];
> if (LINK.tagName.toUpperCase() == "DT") { ++abc; }


Thanks! Indeed, I've missed the .toUpperCase().

Similar Threads