Jump to content

Shinori

Members
 View Profile  See their activity

  • Posts

    29

  • Joined

  • Last visited

 Content Type 

Posts posted by Shinori

    [Solved] Trouble with changing img src (HTML/JS)

    in JavaScript

    Posted · Edited by Shinori

    19 minutes ago, dsonesuk said:

    <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">

    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>

     

    [Solved] Trouble with changing img src (HTML/JS)

    in JavaScript

    Posted

    Quote
    5 minutes ago, dsonesuk said:

    if (document.getElementById(contentname).className = 'notactive')

    Should be

    if (document.getElementById(contentname).className == 'notactive')

    The first applies the value to classname, the latter compares value.

    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.

     

    [Solved] Trouble with changing img src (HTML/JS)

    in JavaScript

    Posted · Edited by Shinori

    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.

×
×
  • Create New...