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);
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>';
}
};
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).