Shinori

Members
  • Content count

    5
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Shinori

  • Rank
    Newbie
  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. 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>
  3. 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!
  4. 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.
  5. 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.