Eventlistener, switch depending on attribute

JavaScript
1

hello,

I want to build a simple switcher, that switches a element from visible to invisble i click the Link each time.

function SwitchSupportFrame()
    {
        if (document.getElementById('remotediv')) {
        var RemoteDiv = document.getElementById('remotediv');
        //RemoteDiv.parentNode.removeChild(RemoteDiv);
            if (RemoteDiv.getAttribute("style")) {
                var attribute = RemoteDiv.getAttribute("style");
                if (attribute == "display: yes;") {
                                    RemoteDiv.setAttribute("style", "display: none;");
                }
                else if (attribute == "display: none;") {
                                    RemoteDiv.setAttribute("style", "display: yes;");
                }
            } }
    else {
    var Ueberschrift = document.querySelector( '#page-wrapper' );
    var CreateDiv = document.createElement('div');
        CreateDiv.setAttribute('id', 'remotediv');
    var NeuDiv = Ueberschrift.insertBefore(CreateDiv, Ueberschrift.childNodes[0]);
        CreateDiv.innerHTML='<object type="text/html" data="tools" width="100%" height="400"></object>';
    } };

But this does not work. It should create the element in the first run, which works fine.

but when i click on the button again, the div is not being hidden. I think it has something do to with comparing the values of “style”, how do i do this correct?

I can follow the loop once through else and he creates the element.

but after creating it he still wont hide it. he no longer follows any way through the loop until i click on another link on the page.

Is it my Eventlistener? .addEventListener('click', SwitchSupportFrame, false);

2

That depends on how you show/hide your element. E.g. assigning something to the style property in JS does not mean it creates a HTML attribute.

best way is to use classes to set visibility, so it is reduced to setting/removing class names.

3

display: yes isn’t a thing. For <div> elements it should be display: block.

Also, you can directly access style attributes without using getAttribute, which is a lot nicer, i.e.

RemoveDiv.style.display = 'block'; and RemoveDiv.style.display = 'none';

4

Okay, I changed that, but it still does not work.
Also the function seems to be executed already once when the page loads and going through the else loop, but after that it no longer reacts.

How do change the function to only load, when clicked, not on page load?
My Code looks like this now:

            var SNFW = document.getElementById('#SNFrameWrapper > a');
            SNFW.onclick = SwitchSupportFrame();

function SwitchSupportFrame()
    {
        if (document.querySelector('#remotediv')) {
        var RemoteDiv = document.querySelector('#remotediv');
        //RemoteDiv.parentNode.removeChild(RemoteDiv);
            if (RemoteDiv.style.display = 'block') {
                RemoteDiv.setAttribute("style", "display: none;");
                console.log("attribute before: yes");
            }
            else if (RemoteDiv.style.display = 'none') {
                     RemoteDiv.setAttribute("style", "display: block;");
                     console.log("attribute before: no");
                } }
    else {
    console.log("attribute before: else");
    var Ueberschrift = document.querySelector( '#page-wrapper' );
    var CreateDiv = document.createElement('div');
        CreateDiv.setAttribute('id', 'remotediv');
        CreateDiv.setAttribute("style", "display: block;");
    var NeuDiv = Ueberschrift.insertBefore(CreateDiv, Ueberschrift.childNodes[0]);
        //CreateDiv.innerHTML='<object type="text/html" data="tools" width="100%" height="400"></object>';
        CreateDiv.innerHTML='<a href="www.test.com">Test</a>';
    }
};

The Link looks like this on the page:

<li class="folder" id="SNFrameWrapper">
<a href="#">Support-Channel<span list_type=""></span></a>
<ul class="collapse in">
<a href="#" data-toggle="collapse" data-target="#sidebar_menu_tools"></a>
</ul>
</li>
5

.onclick expects a handler function to be given but your function returns undefined instead (which is the same as no handler).

6

In other words, it should be SNFW.onclick = SwitchSupportFrame; instead of SNFW.onclick = SwitchSupportFrame();

7

Okay, it works now, thanks.

But now I have another Problem.
In the else loop i want to to call a function getHTML:

else {
    console.log("attribute before: else");
    var Ueberschrift = document.querySelector( '#page-wrapper' );
    var CreateDiv = document.createElement('div');
        CreateDiv.setAttribute('id', 'remotediv');
        CreateDiv.setAttribute("style", "display: block;");
        getHTML( 'data', function (response) {
    var someElem = document.querySelector( '#page-wrapper' );
	var someOtherElem = response.querySelector( '#page-wrapper' );
	CreateDiv.innerHTML = someOtherElem.innerHTML;
    })();

But it says function is not defined, i guess that getHTML is out of the scope of my function. How can I use it in the function?

It is declared like this:

var getHTML = function ( url, callback ) {

	// Feature detection
	if ( !window.XMLHttpRequest ) return;

	// Create new request
	var xhr = new XMLHttpRequest();

	// Setup callback
	xhr.onload = function() {
		if ( callback && typeof( callback ) === 'function' ) {
			callback( this.responseXML );
		}
	}

	// Get the HTML
	xhr.open( 'GET', url );
	xhr.responseType = 'document';
	xhr.send();

};

EDIT: Or maybe another solution:
when I do it like this:
CreateDiv.innerHTML='<object type="text/html" data="tools" width="100%" height="400"></object>';
How can I hide every visible object except:
var someOtherElem = response.querySelector( '#page-wrapper' );
?
With response being the response from getHTML (the other page).

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.