some javascript code doesn't working - if() sentence in event-handler 'onclick'

Question

var head = document.getElementById('head');
var navMain = document.getElementById('navMain');
var navLinks = document.getElementsByClassName('navLink');
var floatEnder_1 = document.getElementById('floatEnder_1');
var iMainContents = document.querySelector('iframe#iMainContents');


// function change class of #head    
    function changeHeadClass(from, to) {
    if(head.className === from) {head.className = to;}
};

// event : click #navMain
    navMain.onclick = function(){
        changeHeadClass('head','head_small');
        floatEnder_1.style.display = 'none';

        if(iMainContents.style.display == 'none') {
           iMainContents.style.display = 'initial'; 
           };
    }

Please watch above codes. I'm trying to do unobtrusive js coding, but it is more difficult than insert js event code in html.

When you see above, most of codes are works fine. but only one sentence, if(iMain...) isn't working. I read 'javascript definition guide 5th' and console report of browsers, but can't find the reason of the problem...

http://jsfiddle.net/40ee6ady/

I wrote my codes above there.

"It works a little bit" either code works or it doesn't. Please explain your problem better. What is the code supposed to do and what does it do? "It doesn't work" is not a problem description. — Felix Kling, Aug 12 '14 at 05:07
sorry for that uncertain explanation. little bit means, it works on firefox(not on IE) with console error message : navMain is null. — jsonott, Aug 12 '14 at 05:12
Have a look http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element, that might be the issue. — Felix Kling, Aug 12 '14 at 05:19
no, I think that... sequence of reading js code is not the reason. because put in js code in the bottom of the html code. right above the — jsonott, Aug 12 '14 at 05:37

score 0 · Answer 1 · answered Aug 12 '14 at 05:19

0

You can use iMainContents.offsetParent === null or window.getComputedStyle(element) for this,

if(iMainContents.offsetParent === null) {
    iMainContents.style.display = 'initial';
}

Or

if(window.getComputedStyle(iMainContents).display == 'none') {
    iMainContents.style.display = 'initial';
}

Demo

First one is much more better that the second option in performance manner

answered Aug 12 '14 at 05:19

Chamika Sandamal

23,565
5
63
86

Future visitors will benefit if you explain why. – Felix Kling Aug 12 '14 at 05:20

score 0 · Answer 2 · answered Aug 12 '14 at 06:03

0

No one knows the reason of the problem.

So I made a detour using jquery'show()' function.

below is the code.

$(iMainContents).show();

answered Aug 12 '14 at 06:03

jsonott

7
3

HanTael · Answer 3 · 2016-08-23T06:14:04.070

I think you already resolve this problem.

<script>
    window.onload = function() {
        var head = document.getElementById('head');
        var navMain = document.getElementById('navMain');
        var iMainContents = document.querySelector('iframe#iMainContents');

        function changeHeadClass(from, to) {
            if(head.className === from) {
                head.className = to;
            }
        };

        navMain.onclick = function(){
            changeHeadClass('head','head_small');
            if(iMainContents.style.display === '') {
                iMainContents.style.display = 'initial';
            };
        }
    }
</script>

score -1 · Answer 4 · edited Aug 12 '14 at 05:20

-1

change the code to

   if(iMainContents.style.display == '') {
          iMainContents.style.display = 'initial'; 
   };

because display =none will show '' in style.display.

edited Aug 12 '14 at 05:20

Bindiya Patoliya

2,726
1
16
15

answered Aug 12 '14 at 05:14

Seminda

1,745
12
15

it doesn't work. I think JS'engine read that sentence 'display:none' as attribute 'display' and property of 'display' as string 'none'. not ''. – jsonott Aug 12 '14 at 05:17

some javascript code doesn't working - if() sentence in event-handler 'onclick'

4 Answers4