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


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

click even doesn't fire

Started byJRough <janis.rough@gmail.com>
First post2017-10-20 18:05 -0700
Last post2017-10-24 17:51 -0700
Articles 12 — 5 participants

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


Contents

  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

#34153 — click even doesn't fire

FromJRough <janis.rough@gmail.com>
Date2017-10-20 18:05 -0700
Subjectclick even doesn't fire
Message-ID<9c849168-0a8e-48aa-837e-451036412e2f@googlegroups.com>
This should work.  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>

[toc] | [next] | [standalone]


#34156

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2017-10-21 09:28 -0700
Message-ID<b7c5f6cb-de45-4bdd-a254-a7880a124522@googlegroups.com>
In reply to#34153
JRough wrote:
> This should work.  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,
> 
> [...]

> myNodeList.addEventListener('click', setClickHandlers, false);

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

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


#34162

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2017-10-22 21:12 +0200
Message-ID<XnsA816D7B8D3F1Ceejj99@194.109.6.166>
In reply to#34153
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)

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


#34164

FromJRough <janis.rough@gmail.com>
Date2017-10-22 13:04 -0700
Message-ID<8d5a5747-e0ed-4399-87bc-68e4bf321680@googlegroups.com>
In reply to#34162
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 the old card to "NO".  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> 

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


#34167

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2017-10-22 22:22 +0200
Message-ID<XnsA816E3B006B29eejj99@194.109.6.166>
In reply to#34164
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)

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


#34165

FromJRough <janis.rough@gmail.com>
Date2017-10-22 13:05 -0700
Message-ID<5ab97c46-9218-4245-8cb7-4f6ba45159fb@googlegroups.com>
In reply to#34162
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)

by the way, thanks,

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


#34166

FromJRough <janis.rough@gmail.com>
Date2017-10-22 13:10 -0700
Message-ID<9b362c92-4ab6-463a-bb2b-0727edfaf66f@googlegroups.com>
In reply to#34153
On Friday, October 20, 2017 at 6:05:52 PM UTC-7, JRough wrote:
> This should work.  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>

thanks,

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


#34171

FromJoao Rodrigues <groups_jr-1@yahoo.com.br>
Date2017-10-22 19:23 -0700
Message-ID<269300f9-44a6-40a1-9d1e-d38cbbb390cd@googlegroups.com>
In reply to#34153
On 20 October 2017 22:05:52 UTC-3, JRough  wrote:
> This should work.  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>

You might use just one class of .cards on the <table> element, instead of several .card classes on every <td>. E.g.

.cards td {
  height: 150px;
  width: 150px;
  background-color: #ccc;
  border: 3px solid black;
  text-align: center;
}

So write <table class="cards">.


> 		<script type="text/javascript">
> 			"use strict";
> 			var myNodeList = document.getElementsByClassName("card");
> 				myNodeList.addEventListener('click', setClickHandlers, false);


That's the problem: getElementsByClassName() returns a live HTMLCollection, which has not the addEventListener() method.


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

I have written the following code using event delegation on the tbody element:

let tbody = document.getElementsByClassName("cards")[0].tBodies[0];
if (tbody) tbody.addEventListener('click', toggleText, false);

function toggleText(e) {
  let thisTD = e.target;
  let tbody = e.currentTarget;
  let thisval = thisTD.textContent;
  if (thisval == 'down') thisTD.textContent = 'up';
  let tds = tbody.querySelectorAll('td');
  [].forEach.call(tds, function(td) {
    if (td !== thisTD) td.textContent = 'down';
  });
}

Also I've written an example on JSFiddle using CSS animation on the table cells:
<https://jsfiddle.net/jrio/5m12wLtr/>

--
Joao Rodrigues

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


#34185

FromJoao Rodrigues <groups_jr-1@yahoo.com.br>
Date2017-10-24 13:15 -0700
Message-ID<8e6e5609-ba99-42c9-ab25-e33ec9b1e3f8@googlegroups.com>
In reply to#34171
Joao Rodrigues wrote:
> 
> I have written the following code using event delegation on the tbody element:
> 
> let tbody = document.getElementsByClassName("cards")[0].tBodies[0];
> if (tbody) tbody.addEventListener('click', toggleText, false);
> 
> function toggleText(e) {
>   let thisTD = e.target;
>   let tbody = e.currentTarget;
>   let thisval = thisTD.textContent;
>   if (thisval == 'down') thisTD.textContent = 'up';
>   let tds = tbody.querySelectorAll('td');
>   [].forEach.call(tds, function(td) {
>     if (td !== thisTD) td.textContent = 'down';
>   });
> }
> 
> Also I've written an example on JSFiddle using CSS animation on the table cells:
> <https://jsfiddle.net/jrio/5m12wLtr/>


I have also created two examples using CSS Animations [1] and Web Animations API (WAAPI) [2] for comparison. The WAAPI example would require a polyfill for use in Edge 15 and IE11.

[1] <https://codepen.io/jrio/pen/WZWWLe>

[2] <https://codepen.io/jrio/pen/jGjLXR>

-- 
Joao Rodrigues

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


#34187

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2017-10-24 14:55 -0700
Message-ID<a86bde17-1838-4838-ac9d-d7be131c3876@googlegroups.com>
In reply to#34185
 Joao Rodrigues wrote:

> I have also created two examples using CSS Animations [1] and Web Animations API (WAAPI) [2] for comparison. The WAAPI example would require a polyfill for use in Edge 15 and IE11.
> 
> [1] <https://codepen.io/jrio/pen/WZWWLe>
> 
> [2] <https://codepen.io/jrio/pen/jGjLXR>

Please include an inline copy of the relevant code. These 3rd party services have a tendency to disappear in short time periods.

at a minimum maybe an archive.org link?

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


#34189

FromThomas 'PointedEars' Lahn <PointedEars@web.de>
Date2017-10-25 00:16 +0200
Message-ID<4789301.BdQH10l8m1@PointedEars.de>
In reply to#34187
Michael Haufe (TNO) wrote:

> Joao Rodrigues wrote:
>> I have also created two examples using CSS Animations [1] and Web
>> Animations API (WAAPI) [2] for comparison. The WAAPI example would
>> require a polyfill for use in Edge 15 and IE11.
>> 
>> [1] <https://codepen.io/jrio/pen/WZWWLe>
>> 
>> [2] <https://codepen.io/jrio/pen/jGjLXR>
> 
> Please include an inline copy of the relevant code. These 3rd party
> services have a tendency to disappear in short time periods.

Although it may look that way superficially, CodePen is not one of those 
“short URL” services; more like a social-media like Web development 
platform.

However, this is Netnews, not the Web. So while references to CodePens are 
more useful than references to just source code, they are not, in general, 
sufficient.
 
> at a minimum maybe an archive.org link?

Insufficient and even worse (because archive.org does not keep all 
resources).  Keep in mind that although you (for reasons I cannot fathom) 
are (still) using b0rked Google Groups, this is Netnews, not the Web.

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

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


#34191

FromJoao Rodrigues <groups_jr-1@yahoo.com.br>
Date2017-10-24 17:51 -0700
Message-ID<61069409-47d6-4368-adca-9640728752d7@googlegroups.com>
In reply to#34187
Michael Haufe (TNO) wrote:
> Joao Rodrigues wrote:
> 
> > I have also created two examples using CSS Animations [1] and Web Animations API (WAAPI) [2] for comparison. The WAAPI example would require a polyfill for use in Edge 15 and IE11.
> > 
> > [1] <https://codepen.io/jrio/pen/WZWWLe>
> > 
> > [2] <https://codepen.io/jrio/pen/jGjLXR>
> 
> Please include an inline copy of the relevant code. These 3rd party services have a tendency to disappear in short time periods.

Codepen and JSFiddle are so relevant to Web development today that I
doubt they are going to disappear in a short period of time. Anyway,
here's the approach used in the first pen cited
<https://codepen.io/jrio/pen/WZWWLe>:

a) I have simplified the OP's HTML markup (table) to a set of unordered
lists, arranged with the Flexbox Layout [1], simulating cards dealt face
down so we can only see their back side:

<ul class="cards">
  <li>back</li>
  <li>back</li>
  <li>back</li>
  <li>back</li>
  <li>back</li>
  <li>back</li>
</ul>

b) The JavaScript code was written to meet the OP's requirements: "[...]
all the cards are face down. If the user clicks one <TD> [a card] then
the card turns UP.  Any other card that was UP should turn DOWN.  Only
one UP at a time."
   Note: I've substituted TD's with LI's, and used the terms 'back' and
'front' instead of 'down' and 'up'.

c) In order to accomplish the task, I had to use Event Delegation [2] on
the parent UL element, instead of adding event listeners to each LI
element. The card face and the flipping animation effect are set with
classes of .normal and .flipped.

let ul = document.querySelector(".cards");
ul.addEventListener("click", toggleText, false);

function toggleText(e) {
  "use strict";
  let thisLI = e.target;
  let ul = e.currentTarget;
  let lis = ul.children;
  [].forEach.call(lis, function (li) {
    let txt = li.textContent;
    let c = li.classList;
    if (li === thisLI && txt == "back") {
      c.remove("normal");
      c.add("flipped");
    } else if (li !== thisLI && txt == "front") {
      c.remove("flipped");
      c.add("normal");
    } /* else {
         c.remove("flipped", "normal"); -> it makes no difference.
    } */
  });
}

d) The exception to the Event Delegation approach was the 'animationend'
event listener added to each LI element, because it looked better to
change the card's text from 'back' to 'front' and vice-versa after the
flipping animation had finished.

let lis = ul.children;
[].forEach.call(lis, function (li) {
  // lis.forEach(...) would work in Chrome and FF.
  li.addEventListener("animationend", onAnimEnd, false);
});

function onAnimEnd() {
  let txt = this.textContent;
  this.textContent = txt == "front" ? "back" : "front";
}

e) I have chosen CSS Animations over CSS Transitions because of problems
encountered while trying to set the text of a flipped card and adjust
the choreography of animation (delay between transitions, etc.). It
looked better for me to use CSS Animations, and I wanted to fork the
example using the Web Animations API (WAAPI), which I did in the other
pen cited <https://codepen.io/jrio/pen/jGjLXR>.

[1] <https://css-tricks.com/snippets/css/a-guide-to-flexbox/>
[2] <https://davidwalsh.name/event-delegate>

-- 
Joao Rodrigues

[toc] | [prev] | [standalone]


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


csiph-web