Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #34167
| Newsgroups | comp.lang.javascript |
|---|---|
| Subject | Re: click even doesn't fire |
| From | "Evertjan." <exxjxw.hannivoort@inter.nl.net> |
| References | <9c849168-0a8e-48aa-837e-451036412e2f@googlegroups.com> <XnsA816D7B8D3F1Ceejj99@194.109.6.166> <8d5a5747-e0ed-4399-87bc-68e4bf321680@googlegroups.com> |
| Date | 2017-10-22 22:22 +0200 |
| Message-ID | <XnsA816E3B006B29eejj99@194.109.6.166> (permalink) |
JRough <janis.rough@gmail.com> wrote on 22 Oct 2017 in
comp.lang.javascript:
> On Sunday, October 22, 2017 at 12:13:18 PM UTC-7, Evertjan. wrote:
>> JRough <janis.rough@gmail.com> wrote on 21 Oct 2017 in
>> comp.lang.javascript:
>>
>> > This should work.
>>
>> No, it should not. [and the proof of the pudding..]
>>
>> > There are no errors but the click event doesn't
>> > happen? What is supposed to happen is all the cards are face down.
>> > If the user clicks one <TD> then the card turns UP. Any other card
>> > that was UP should turn DOWN. Only one UP at a time. tnx,
>> >
>> > <!DOCTYPE html>
>> > <html>
>> >
>> > <head>
>> > <style type="text/css">
>> > td{height:150px;width:150px;background-color:gray;border:
>> > 3px solid black; } section{margin:0 auto;width:50%;}
>> > </style>
>> > </head>
>> > <body>
>> > <section>
>> > <table >
>> > <tbody>
>> > <tr>
>> > <td class="card"> down </td>
>> > <td class="card"> down </td>
>> > </tr>
>> > <tr>
>> > <td class="card"> down </td>
>> > <td class="card">down </td>
>> > </tr>
>> > </tbody>
>> > </table>
>> > </section>
>> > <script type="text/javascript">
>> > "use strict";
>> > var myNodeList =
>> > document.getElementsByClassName("card");
>> > myNodeList.addEventListener('click',
>> > setClickHandlers, false);
>> > function setClickHandlers(e , myNodeList) {
>> > for (var i=0; i< myNodeList.length; i++){
>> > if ( e.myNodeList[i].innerHtml=="up" ){
>> > myNodeList[i].innerHtml= "down";
>> > }
>> > }
>> > e.target.td.innerHTML = 'up';
>> > }
>> >
>> > </script>
>> > </body>
>> > </html>
>>
>> Next to Michael's correction of the addEventListener,
>> innerHTML must be innerHTML,
>> 'this' is far easier than the strange e.target.td, imho,
>> downing all cards is easier than just the up one.
>>
>> Try this for 'this':
>>
>> <script type="text/javascript">
>> "use strict";
>>
>> let myNodeList = document.getElementsByClassName("card");
>>
>> for (let i=0; i< myNodeList.length; i++)
>> myNodeList[i].addEventListener('click', doClick, false);
>>
>> function doClick() {
>> for (let i=0; i< myNodeList.length; i++)
>> myNodeList[i].innerHTML = 'down';
>> this.innerHTML = 'up';
>> };
>>
>> </script>
>>
>>
>>
>> --
>> Evertjan.
>> The Netherlands.
>> (Please change the x'es to dots in my emailaddress)
>
> Hello Evertjan I like yours better. I will study over it. Meanwhile I
> rewrote it. Can someone explain why it doesn't convert
Possibly because you "rewrote it", before you "studied over it"?
And surely because you did not study Michael's correction
and corrected accordingly.
I don't think it is wize to bombard us with code you write without
understanding after we showed you the errors.
Please do some debugging and read the specs of methods you use.
Even if you understand the specs and what you are doing,
code is almost never bugfree at the first try.
> the old card to "NO".
"NO"? I thought this was about "up" and "down".
> They aall are UP when clicked now. <!DOCTYPE html>
> <html>
>
> <head>
> <style type="text/css">
> td{height:150px;width:150px;background-color:gray;border:
> 3px solid black; } section{margin:0 auto;width:50%;}
> </style>
> </head>
> <body>
> <!-- addEventListener is not a method of myNodeList.
>
> attach the event to each individual element, or attach the event to an
> element higher up the DOM hierarchy and differentiate on e.target-->
> <section>
> <table>
> <tbody>
> <tr>
> <td class="card"> down </td>
> <td class="card"> down </td>
> </tr>
> <tr>
> <td class="card"> down </td>
> <td class="card">down </td>
> </tr>
> </tbody>
> </table>
> </section>
> <script type="text/javascript">
> "use strict";
> let tbl = document.getElementsByTagName("table");
> tbl[0].addEventListener('click',setClickHandler, false);
> function setClickHandler(e) {
>
>
> let cards = document.getElementsByClassName('card');
> for (var i=0; i >= cards.length; i++){
> if( cards[i].innerHTML == "Up"){
> cards[i].innerHTML = "Down";
> }
>
> }
> e.target.innerHTML = "Up";
> }
>
>
> </script>
> </body>
> </html>
>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
click even doesn't fire JRough <janis.rough@gmail.com> - 2017-10-20 18:05 -0700
Re: click even doesn't fire "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-10-21 09:28 -0700
Re: click even doesn't fire "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-10-22 21:12 +0200
Re: click even doesn't fire JRough <janis.rough@gmail.com> - 2017-10-22 13:04 -0700
Re: click even doesn't fire "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-10-22 22:22 +0200
Re: click even doesn't fire JRough <janis.rough@gmail.com> - 2017-10-22 13:05 -0700
Re: click even doesn't fire JRough <janis.rough@gmail.com> - 2017-10-22 13:10 -0700
Re: click even doesn't fire Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2017-10-22 19:23 -0700
Re: click even doesn't fire Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2017-10-24 13:15 -0700
Re: click even doesn't fire "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-10-24 14:55 -0700
Re: click even doesn't fire Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-10-25 00:16 +0200
Re: click even doesn't fire Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2017-10-24 17:51 -0700
csiph-web