f



How to reset onclick event upon event change?

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.
0
justaguy
10/30/2016 7:41:38 PM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

8 Replies
518 Views

Similar Articles

[PageSpeed] 38

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.

0
justaguy
10/30/2016 7:45:22 PM
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)
0
Evertjan
10/30/2016 7:50:52 PM
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: }
0
justaguy
10/30/2016 8:09:05 PM
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)
0
Evertjan
10/30/2016 8:34:35 PM
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.

0
justaguy
10/30/2016 8:45:46 PM
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)
0
Evertjan
10/30/2016 9:21:00 PM
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.

0
justaguy
10/30/2016 10:02:16 PM
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)
0
Evertjan
10/31/2016 9:29:08 AM
Reply: