Shinori

Members
  • Content count

    5
  • Joined

  • Last visited

Everything posted by Shinori

  1. Eventually the time between creating and XMLhttpRequest and getting something back was the reason that class hasnt been changed correctly. Not even sure why i wrote it into the readystate-condition Thanks anyways. You must be irritated by such newbies like me
  2. Dear W3Schools-Community, There is something not working with my code right here. It should be mentioned that I am fairly new to using JavaScript. Here is my HTML code (stripped down to the essential parts): <!DOCTYPE html> <html lang="de"> <head> <script type="text/javascript"> function change_content(contentname) { if (document.getElementById(contentname).className = 'notactive') { document.getElementById('login').className = 'notactive'; document.getElementById('news').className = 'notactive'; document.getElementById('info').className = 'notactive'; document.getElementById('websites').className = 'notactive'; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById('content').innerHTML = this.responseText; if (contentname == 'kontakt' || contentname == 'hilfe' || contentname == 'impressum') { document.getElementById('info').className = 'active'; } else { document.getElementById(contentname).className = 'active'; } } }; xmlhttp.open('POST', contentname + 'page.php', true); xmlhttp.send(); } if (document.getElementById('info').className == 'active') { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-black.png"; } else { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-yellow.png"; } } window.onload = change_content; </script> </head> <header> <ul id="mainnavigation"> <li id="mainlist" class="dropdown"><a id="info" class="notactive" onclick="change_content(this.id);">Information<img id="dropdown-icon" style="width: 15px; height: 12px; float: right; margin-top: 7px; margin-right: 20px;" src="/ressource/images/nydoo-dropdown-icon-yellow.png" id="dropdown_icon"></a></li> </ul> </header> <body onload="change_content('login'); return false;"> <div id="content"> </div> </body> </html> What I'm trying to do is changing the color from img (id="dropdown-icon") from yellow to black whenever a (id="info") has class "active". Also the other way around (class "notactive" -> change from black to yellow). Hopefully this describes it. It maybe a simple thing. But I'm getting frustrated with this issue. Let me know if I screwed it up myself :3 Thank you very much n advance.
  3. Okay. so I changed it. Still haviing the same problems: BTW if I click id'info' twice. The img changed to black. Is there a timing problem ? Code: <!DOCTYPE html> <html lang='de'> <head> <script type='text/javascript'> function change_content(contentname) { if (document.getElementById(contentname).className == 'notactive') { document.getElementById('login').className = 'notactive'; document.getElementById('news').className = 'notactive'; document.getElementById('info').className = 'notactive'; document.getElementById('websites').className = 'notactive'; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById('content').innerHTML = this.responseText; if (contentname == 'kontakt' || contentname == 'hilfe' || contentname == 'impressum') { document.getElementById('info').className = 'active'; } else { document.getElementById(contentname).className = 'active'; } } }; xmlhttp.open('POST', contentname + 'page.php', true); xmlhttp.send(); } if (document.getElementById('info').className == 'active') { document.getElementById('dropdown-icon').src = '/ressource/images/nydoo-dropdown-icon-black.png'; } else { document.getElementById('dropdown-icon').src = '/ressource/images/nydoo-dropdown-icon-yellow.png'; } } window.onload = change_content; </script> </head> <body onload='change_content('login'); return false;'> <header> <ul id='mainnavigation'> <li id='mainlist' class='dropdown'><a id='info' class='notactive' onclick='change_content(this.id);'>Information<img id='dropdown-icon' style='position: absolute; width: 15px; height: 12px; margin-right: 20px;' src='/ressource/images/nydoo-dropdown-icon-yellow.png'></a> </li> </ul> </header> </body> </html>
  4. Okay, I understood the "body" part. But what do you mean by multiple reference of the same element? Am I only allowed to use document.getElementById() once for each element? Sorry if my english isn't appropriate. Not my native language :/ Thanks a lot!
  5. Alright. Thanks! I changed it to the logical Operator '==' . Still doesn't it solve my problem :/ The img src keeps being yellow all the time.