Jump to content
Shinori

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

Recommended Posts

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.

Edited by Shinori

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

You have multiple id reference on the SAME element, when there should only be one, and the the body element should contain all the html elements that will been seen on the web page, and directly follow the closing </head>  element.

Share this post


Link to post
Share on other sites

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!

Edited by Shinori

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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>

 

Edited by Shinori

Share this post


Link to post
Share on other sites

These are just small issues that will cause problems, I can't you a outright solution to fix your problem.

You have to make sure that any element id references that are referred to in the JavaScript code, actually exist before these id references are referred to.

Share this post


Link to post
Share on other sites

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 :D 

 

Thanks anyways. You must be irritated by such newbies like me :P 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...