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

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

How to reset onclick event upon event change?

Started byjustaguy <lichunshen84@gmail.com>
First post2016-10-30 12:41 -0700
Last post2016-10-31 10:29 +0100
Articles 9 — 2 participants

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

Contents

  How to reset onclick event upon event change? justaguy <lichunshen84@gmail.com> - 2016-10-30 12:41 -0700
    Re: How to reset onclick event upon event change? justaguy <lichunshen84@gmail.com> - 2016-10-30 12:45 -0700
    Re: How to reset onclick event upon event change? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-30 20:50 +0100
      Re: How to reset onclick event upon event change? justaguy <lichunshen84@gmail.com> - 2016-10-30 13:09 -0700
        Re: How to reset onclick event upon event change? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-30 21:34 +0100
          Re: How to reset onclick event upon event change? justaguy <lichunshen84@gmail.com> - 2016-10-30 13:45 -0700
            Re: How to reset onclick event upon event change? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-30 22:21 +0100
              Re: How to reset onclick event upon event change? justaguy <lichunshen84@gmail.com> - 2016-10-30 15:02 -0700
                Re: How to reset onclick event upon event change? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-31 10:29 +0100

#31625 — How to reset onclick event upon event change?

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-30 12:41 -0700
SubjectHow to reset onclick event upon event change?
Message-ID<aa44f506-fa3c-4e74-9776-b53e1103a1ee@googlegroups.com>
The line 13 in the code below attempts to reset an onclick even to first to null and then on line 14, attempts to set it to another action, however, it's ineffective and how to do it?

var config = function() {
	// display config / usage info but no dupe display
	if (!document.getElementById('confinfo')) {
		var i = document.createElement('info');
			i.id = "confinfo";
			i.style = "color:green";
			i.innerHTML = conf.usage;
			document.body.insertBefore(i,document.body.firstChild);	
			
			// prep for next
			var h = document.getElementById('usage').value = "Hide config / usage instructions";
			 console.log('from top section: ' +h);	
				h.onclick = null; 
				h.onclick = function () {
					console.log('hide clicked');
				// document.getElementById('confinfo').style.display = "none";		
				document.getElementById('confinfo').innerHTML = '';
			 }
		}
}


Thanks.

[toc] | [next] | [standalone]

#31626

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-30 12:45 -0700
Message-ID<38d31792-f301-47c0-8c35-12f7c3cb1c7f@googlegroups.com>
In reply to#31625
On Sunday, October 30, 2016 at 3:42:03 PM UTC-4, justaguy wrote:
> The line 13 in the code below attempts to reset an onclick even to first to null and then on line 14, attempts to set it to another action, however, it's ineffective and how to do it?
> 
> var config = function() {
> 	// display config / usage info but no dupe display
> 	if (!document.getElementById('confinfo')) {
> 		var i = document.createElement('info');
> 			i.id = "confinfo";
> 			i.style = "color:green";
> 			i.innerHTML = conf.usage;
> 			document.body.insertBefore(i,document.body.firstChild);	
> 			
> 			// prep for next
> 			var h = document.getElementById('usage').value = "Hide config / usage instructions";
> 			 console.log('from top section: ' +h);	
> 				h.onclick = null; 
> 				h.onclick = function () {
> 					console.log('hide clicked');
> 				// document.getElementById('confinfo').style.display = "none";		
> 				document.getElementById('confinfo').innerHTML = '';
> 			 }
> 		}
> }
> 
> 
> Thanks.

Additional info:
conf.usage refers to object conf's property of usage, which have been defined.

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

#31627

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2016-10-30 20:50 +0100
Message-ID<XnsA6B1D413A9814eejj99@194.109.6.166>
In reply to#31625
justaguy <lichunshen84@gmail.com> wrote on 30 Oct 2016 in
comp.lang.javascript: 

> 
> The line 13 in the code below attempts to reset an onclick even to first
> to null and then on line 14, attempts to set it to another action,

Could you please supply line-numbering when mentioning such numbers?

On usenet the lines are not the same on different news-readers.

> however, it's ineffective and how to do it? 

How to be ineffective with line-numbers? ROTFL!

> var config = function() {
>      // display config / usage info but no dupe display
>      if (!document.getElementById('confinfo')) {
>           var i = document.createElement('info');
>                i.id = "confinfo";
>                i.style = "color:green";
>                i.innerHTML = conf.usage;
>                document.body.insertBefore(i,document.body.firstChild);  
>                  
>                
>                // prep for next
>                var h = document.getElementById('usage').value = "Hide
>                config / usage instructions"; 
>                 console.log('from top section: ' +h);     
>                     h.onclick = null; 
>                     h.onclick = function () {
>                          console.log('hide clicked');
>                     // document.getElementById('confinfo').style.display
>                     = "none";          
>                     document.getElementById('confinfo').innerHTML = ''; 
>                 }
>           }
>}
> 
> 
> Thanks.



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

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

#31628

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-30 13:09 -0700
Message-ID<1cd0bd60-3d19-4bb8-8718-a066dd9645d5@googlegroups.com>
In reply to#31627
On Sunday, October 30, 2016 at 3:50:57 PM UTC-4, Evertjan. wrote:
> justaguy .com> wrote on 30 Oct 2016 in
> comp.lang.javascript: 
> 
> > 
> > The line 13 in the code below attempts to reset an onclick even to first
> > to null and then on line 14, attempts to set it to another action,
> 
> Could you please supply line-numbering when mentioning such numbers?
> 
> On usenet the lines are not the same on different news-readers.
> 
> > however, it's ineffective and how to do it? 
> 
> How to be ineffective with line-numbers? ROTFL!
> 
> > var config = function() {
> >      // display config / usage info but no dupe display
> >      if (!document.getElementById('confinfo')) {
> >           var i = document.createElement('info');
> >                i.id = "confinfo";
> >                i.style = "color:green";
> >                i.innerHTML = conf.usage;
> >                document.body.insertBefore(i,document.body.firstChild);  
> >                  
> >                
> >                // prep for next
> >                var h = document.getElementById('usage').value = "Hide
> >                config / usage instructions"; 
> >                 console.log('from top section: ' +h);     
> >                     h.onclick = null; 
> >                     h.onclick = function () {
> >                          console.log('hide clicked');
> >                     // document.getElementById('confinfo').style.display
> >                     = "none";          
> >                     document.getElementById('confinfo').innerHTML = ''; 
> >                 }
> >           }
> >}
> > 
> > 
> > Thanks.
> 
> 
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)


	Line 1: var config = function() {
	Line 2: 	// display config / usage info but no dupe display
	Line 3: 	if (!document.getElementById('confinfo')) {
	Line 4: 		var i = document.createElement('info');
	Line 5: 			i.id = "confinfo";
	Line 6: 			i.style = "color:green";
	Line 7: 			i.innerHTML = conf.usage;
	Line 8: 			document.body.insertBefore(i,document.body.firstChild);	
	Line 9: 			
	Line 10: 			// hide the config / usage info to free up the real estate
	Line 11: 			var h = document.getElementById('usage').value = "Hide config / usage instructions";
	Line 12: 			 console.log('from top section: ' +h);	
	Line 13: 				h.onclick = null; 
	Line 14: 				h.onclick = function () {
	Line 15: 					console.log('hide clicked');
	Line 16: 				// document.getElementById('confinfo').style.display = "none";		
	Line 17: 				document.getElementById('confinfo').innerHTML = '';
	Line 18: 			 }
	Line 19: 		}
	Line 20: }

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

#31629

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2016-10-30 21:34 +0100
Message-ID<XnsA6B1DB7CDBFCBeejj99@194.109.6.166>
In reply to#31628
justaguy <lichunshen84@gmail.com> wrote on 30 Oct 2016 in
comp.lang.javascript: 

> Line 11: var h = document.getElementById('usage').value = 
> "Hide config / usage instructions";

var a = b.value = "c";

This means that:
1 the now the attribute of b that is called value contains "c".
2 that now the value a contains "c" too.

> Line 12: console.log('from top section: ' +h);    

You should see in the console:
'from top section: c' [or your real text-string]

> Line 13: h.onclick = null; 

This string 'c' [or your real text-string]
does not have a onclick listener-method!!!

[remember h contains a string: 
h = 'Hide config / usage instructions';]

[and even if it had such method, 
setting it to null would not have any effect
as you reassign it in Line 14 to something else again.

> Line 14: h.onclick = function () {

it is like:

var x;
x = null; // this line has no lasting effect!
x = 'Hi folks';
x.onclick = alert(''); // this line is nonsense!
// because: 'Hi folks' has no listener-method!


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

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

#31631

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-30 13:45 -0700
Message-ID<34c0db56-fe66-4070-b37e-6bd86f412c07@googlegroups.com>
In reply to#31629
On Sunday, October 30, 2016 at 4:34:39 PM UTC-4, Evertjan. wrote:
> justaguy > wrote on 30 Oct 2016 in
> comp.lang.javascript: 
> 
> > Line 11: var h = document.getElementById('usage').value = 
> > "Hide config / usage instructions";
> 
> var a = b.value = "c";
> 
> This means that:
> 1 the now the attribute of b that is called value contains "c".
> 2 that now the value a contains "c" too.
> 
> > Line 12: console.log('from top section: ' +h);    
> 
> You should see in the console:
> 'from top section: c' [or your real text-string]
> 
> > Line 13: h.onclick = null; 
> 
> This string 'c' [or your real text-string]
> does not have a onclick listener-method!!!
> 
> [remember h contains a string: 
> h = 'Hide config / usage instructions';]
> 
> [and even if it had such method, 
> setting it to null would not have any effect
> as you reassign it in Line 14 to something else again.
> 
> > Line 14: h.onclick = function () {
> 
> it is like:
> 
> var x;
> x = null; // this line has no lasting effect!
> x = 'Hi folks';
> x.onclick = alert(''); // this line is nonsense!
> // because: 'Hi folks' has no listener-method!
> 

So, is it possible to add event listener to the var x as you described?
Thanks.

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

#31632

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2016-10-30 22:21 +0100
Message-ID<XnsA6B1E35BD25F5eejj99@194.109.6.166>
In reply to#31631
justaguy <lichunshen84@gmail.com> wrote on 30 Oct 2016 in 
comp.lang.javascript:

> On Sunday, October 30, 2016 at 4:34:39 PM UTC-4, Evertjan. wrote:
>> justaguy > wrote on 30 Oct 2016 in
>> comp.lang.javascript: 
>> 
>> > Line 11: var h = document.getElementById('usage').value = 
>> > "Hide config / usage instructions";
>> 
>> var a = b.value = "c";
>> 
>> This means that:
>> 1 the now the attribute of b that is called value contains "c".
>> 2 that now the value a contains "c" too.
>> 
>> > Line 12: console.log('from top section: ' +h);    
>> 
>> You should see in the console:
>> 'from top section: c' [or your real text-string]
>> 
>> > Line 13: h.onclick = null; 
>> 
>> This string 'c' [or your real text-string]
>> does not have a onclick listener-method!!!
>> 
>> [remember h contains a string: 
>> h = 'Hide config / usage instructions';]
>> 
>> [and even if it had such method, 
>> setting it to null would not have any effect
>> as you reassign it in Line 14 to something else again.
>> 
>> > Line 14: h.onclick = function () {
>> 
>> it is like:
>> 
>> var x;
>> x = null; // this line has no lasting effect!
>> x = 'Hi folks';
>> x.onclick = "alert('eh?');"; // this line is nonsense!
>> // because: 'Hi folks' has no listener-method!
>> 
> 
> So, is it possible to add event listener to the var x as you described?
> Thanks.

No, because var x points to/contains a javascript text-string.

[However would you click on a javascript text-string???]

And javascript text-strings do not have event-listenters.

==============

To certain dom-elements an event-listener can be assigned.
You would need var x to point to such element.

I bet you can figure out how to do that without having us spell it out.

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

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

#31634

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-30 15:02 -0700
Message-ID<19161dbd-2a37-4eed-a2c4-dcab995f5c9c@googlegroups.com>
In reply to#31632
On Sunday, October 30, 2016 at 5:21:20 PM UTC-4, Evertjan. wrote:
> justaguy > wrote on 30 Oct 2016 in 
> comp.lang.javascript:
> 
> > On Sunday, October 30, 2016 at 4:34:39 PM UTC-4, Evertjan. wrote:
> >> justaguy > wrote on 30 Oct 2016 in
> >> comp.lang.javascript: 
> >> 
> >> > Line 11: var h = document.getElementById('usage').value = 
> >> > "Hide config / usage instructions";
> >> 
> >> var a = b.value = "c";
> >> 
> >> This means that:
> >> 1 the now the attribute of b that is called value contains "c".
> >> 2 that now the value a contains "c" too.
> >> 
> >> > Line 12: console.log('from top section: ' +h);    
> >> 
> >> You should see in the console:
> >> 'from top section: c' [or your real text-string]
> >> 
> >> > Line 13: h.onclick = null; 
> >> 
> >> This string 'c' [or your real text-string]
> >> does not have a onclick listener-method!!!
> >> 
> >> [remember h contains a string: 
> >> h = 'Hide config / usage instructions';]
> >> 
> >> [and even if it had such method, 
> >> setting it to null would not have any effect
> >> as you reassign it in Line 14 to something else again.
> >> 
> >> > Line 14: h.onclick = function () {
> >> 
> >> it is like:
> >> 
> >> var x;
> >> x = null; // this line has no lasting effect!
> >> x = 'Hi folks';
> >> x.onclick = "alert('eh?');"; // this line is nonsense!
> >> // because: 'Hi folks' has no listener-method!
> >> 
> > 
> > So, is it possible to add event listener to the var x as you described?
> > Thanks.
> 
> No, because var x points to/contains a javascript text-string.
> 
> [However would you click on a javascript text-string???]
> 
> And javascript text-strings do not have event-listenters.
> 
> ==============
> 
> To certain dom-elements an event-listener can be assigned.
> You would need var x to point to such element.
> 
> I bet you can figure out how to do that without having us spell it out.
> 

Ok, I see now, thanks.

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

#31636

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2016-10-31 10:29 +0100
Message-ID<XnsA6B26AAA47E9Deejj99@194.109.6.166>
In reply to#31634
I wrote on 30 Oct 2016 in comp.lang.javascript:

> ... do not have event-listenters.

Spurious 't', my bad.

event-listeners.

==============

You can set them dynamically with Javascript too:

<http://www.w3schools.com/js/js_htmldom_eventlistener.asp>

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

[toc] | [prev] | [standalone]

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

csiph-web