Asp Forum - FireFox onclick problem

Mel Smith

2/10/2015 6:02:00 PM

Hi:

IE and Chrome both 'hide' the <div> below when a user 'clicks' on the
button.

However, an automatically updated version of FF does NOT .

That is, when a user 'clicks' on the 'Hide Me' button, nothing happens.
Very few (any ??) of my users have FF installed, and I very seldom use FF.
But month ago, I *believe* it worked correctly -- but I'm not sure.

Question:

What FF setting could I have (somehow) set wrongly such that 'onclicks'
were not acted on.

TIA for any hints. Again, IE and Chrome work correctly

-Mel Smith

**** my html and ES/JS code below ******
<div id="inotice">
<input type="button" onclick="hidenotice();" value="Hide Me" />

</div>

function hidenotice() {
var el=document.getElementById("inotice");
el.style.display="none";
}

*************************

6 Answers

Evertjan.

2/10/2015 7:32:00 PM

"Mel Smith" <syntel@cox.net> wrote on 10 feb 2015 in comp.lang.javascript:

> Hi:
>
>
> IE and Chrome both 'hide' the <div> below when a user 'clicks' on
> the
> button.
>
> However, an automatically updated version of FF does NOT .
>
> That is, when a user 'clicks' on the 'Hide Me' button, nothing
> happens.
> Very few (any ??) of my users have FF installed, and I very seldom use
> FF. But month ago, I *believe* it worked correctly -- but I'm not sure.
>
> Question:
>
> What FF setting could I have (somehow) set wrongly such that
> 'onclicks'
> were not acted on.
>
> TIA for any hints. Again, IE and Chrome work correctly
>
> -Mel Smith
>
> **** my html and ES/JS code below ******
> <div id="inotice">
> <input type="button" onclick="hidenotice();" value="Hide Me" />
> 
> </div>
>
> function hidenotice() {
> var el=document.getElementById("inotice");
> el.style.display="none";
>}

Works fine here also in FF.

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

I would use a more general solution for the function,
if the <input> is a always direct child:

<script type='text/javascript'>
function hideParent(x) {
x.parentNode.style.display = "none";
};
</script>

<div>
<input type="button" onclick="hideParent(this);" value="Hide Parent">
lots of text and <br> here
</div>

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

JR

2/10/2015 9:35:00 PM

Mel Smith wrote:
> Hi:
>
>
> IE and Chrome both 'hide' the <div> below when a user 'clicks' on the
> button.
>
> However, an automatically updated version of FF does NOT .
>
> That is, when a user 'clicks' on the 'Hide Me' button, nothing happens.
> Very few (any ??) of my users have FF installed, and I very seldom use FF.
> But month ago, I *believe* it worked correctly -- but I'm not sure.
>
> Question:
>
> What FF setting could I have (somehow) set wrongly such that 'onclicks'
> were not acted on.

I regularly work with FF and Firebug. And I've tested your example
successfully. So firstly I'd suggest validating you markup [1]. Also try
to debug your script with Firebug [2] and / or with the new Developer
Tools available in the latest FF version.

[1] http://validat...
[2] http://getfi...

>
> TIA for any hints. Again, IE and Chrome work correctly
>
> -Mel Smith
>
> **** my html and ES/JS code below ******
> <div id="inotice">
> <input type="button" onclick="hidenotice();" value="Hide Me" />
> 
> </div>
>
> function hidenotice() {
> var el=document.getElementById("inotice");
> el.style.display="none";
> }
>

Also you can use a div styled as a button, instead of the button
element, and use event delegation to hide the parent div. E.g.

<style>
.button {
border-radius:4px;
background-color: #f2f5f7;
border: 1px outset #ccc;
color: #000;
cursor: pointer;
font-weight: 900;
text-align: center;
width: 150px;
}
</style>

<div id="inotice">
<div class="button">Hide Me</div>
<p>Lots of text going here</p>
</div>

<script type="text/javascript">
function hideDiv(e) {
if (e.target.firstChild.nodeValue == "Hide Me") {
e.currentTarget.style.display = 'none';
}
}

document.getElementById('inotice').
addEventListener('click', hideDiv, false);
</script>

--
Joao Rodrigues

Mel Smith

2/10/2015 9:55:00 PM

Evertjan said:
> Works fine here also in FF.
>
> ==============
>
> I would use a more general solution for the function,
> if the <input> is a always direct child:
>
> <script type='text/javascript'>
> function hideParent(x) {
> x.parentNode.style.display = "none";
> };
> </script>
>
> <div>
> <input type="button" onclick="hideParent(this);" value="Hide Parent">
> lots of text and <br> here
> </div>

Hi Evertjan:

Tried your general method above. Same failed result.

Again, current versions of IE and Chrome work correctly, immediately
hiding the 'notice' division. But using FF: nothing happens.

So, I reverted to my original code (as shown in my original post) for
now, and will try 'debugging'. But its so simple and the other browsers
work and have worked for years with this code. Sigh ...

-Mel

Mel Smith

2/10/2015 10:21:00 PM

Hi Joao:

">
> I regularly work with FF and Firebug. And I've tested your example
> successfully. So firstly I'd suggest validating you markup [1]. Also try

I had one error in one of my 'br' lines : <br /></br />

Corrected this fault with *no* change in the result : FF did nothing,
current versions of IE and Chrome correctly hid the division.

> to debug your script with Firebug [2] and / or with the new Developer
> Tools available in the latest FF version.
>
> [1] http://validat...

> [2] http://getfi...
>
I'll try the firebug, but will delay any further changes to my code
until I find whi *my* FF doesn't react to the onclick event.

What in my FF environment could I have changed ??

Puzzle, puzzle ...

Thanks Joao

Christoph M. Becker

2/10/2015 10:37:00 PM

Mel Smith wrote:

> IE and Chrome both 'hide' the <div> below when a user 'clicks' on the
> button.
>
> However, an automatically updated version of FF does NOT .
>
> That is, when a user 'clicks' on the 'Hide Me' button, nothing happens.
> Very few (any ??) of my users have FF installed, and I very seldom use FF.
> But month ago, I *believe* it worked correctly -- but I'm not sure.
>
> Question:
>
> What FF setting could I have (somehow) set wrongly such that 'onclicks'
> were not acted on.

Maybe JavaScript is disabled completely, or some installed plugin blocks
the execution? Maybe Content Security Policy[1] is enabled?

I suggest to place a quick debug statement at the beginning of
hidenotice() to see whether the function is called at all, e.g.

alert('hidenotice');

And, of course, have a look at the error console of Firefox.

[1] <http://en.wikipedia.org/wiki/Content_Security_...

--
Christoph M. Becker

Mel Smith

2/10/2015 11:21:00 PM

Hi Christophe:

>
> Maybe JavaScript is disabled completely, or some installed plugin blocks
> the execution? Maybe Content Security Policy[1] is enabled?

Correct !

A couple of weeks ago, I had complained about not being able to 'Disable
Javascript' for testing. I then reposted about finally finding the
'about:config settings.

I did my testing then I 'thought' that I had left Javascript enabled..

So, I went back in with my 'new' firefox debug package, and tried to
follow what was going on. The FF debug package *said* that FF was disabled
!

This rang firebells in my head !

So, I dived deep into about:config, and it said FF was *enabled*

I toggled it a couple of times to ensure it really *was* enabled, then
exited and tried my test again.

It now works correctly -- but I can't understand the enabled / disabled
settings and their transience ?? .

Anyway, thank you for confirming what I did !

and thanks to EvetJan and Joao for their help.

-Mel

(so now I'm going to dig deeper into Firebug.)

>
> I suggest to place a quick debug statement at the beginning of
> hidenotice() to see whether the function is called at all, e.g.
>
> alert('hidenotice');
>
> And, of course, have a look at the error console of Firefox.
>
> [1] <http://en.wikipedia.org/wiki/Content_Security_...
>
> --
> Christoph M. Becker

comp.lang.javascript

FireFox onclick problem

Mel Smith

Evertjan.

JR

Mel Smith

Mel Smith

Christoph M. Becker

Mel Smith

x Login to ForumsZone