diiazopde Posted July 31, 2015 Share Posted July 31, 2015 hi , i try to write a function that provide to change the image when i click on it: <body> <script> function hide(){ if (document.getElementById("image").src == "arrowup.png"){ document.getElementById("image").src = "arrowdown.png"; } else { document.getElementById("image").src = "arrowup.png"; } } </script> <img id="image" onclick="hide()" src="arrowdown.png" width="30" height="30"/> </body> but it doesnt work , what is the problem, please???? Link to comment Share on other sites More sharing options...
Ingolme Posted July 31, 2015 Share Posted July 31, 2015 I think it's probably that the src attribute contains a full path to the image rather than just the string you gave it. Perhaps try this: if(document.getElementById("image").getAttribute("src") == "arrowup.png") { Link to comment Share on other sites More sharing options...
diiazopde Posted July 31, 2015 Author Share Posted July 31, 2015 thanks for responding; i try it, but it doesn't work , still no solution ?????? Link to comment Share on other sites More sharing options...
Ingolme Posted July 31, 2015 Share Posted July 31, 2015 I can't see anything in that fragment of code that could cause it to go wrong. Have you checked for error messages in the Javascript console? Link to comment Share on other sites More sharing options...
diiazopde Posted August 1, 2015 Author Share Posted August 1, 2015 i did ,but but no results, no erro message found Link to comment Share on other sites More sharing options...
diiazopde Posted August 1, 2015 Author Share Posted August 1, 2015 (edited) i want the hide and show a block when you clik on an image, using Javascript code, so this is the complete code for this function but it doenst work <script> function hide(){ if(document.getElementById("arrow").src == "arrowup.png"){ document.getElementById("arrow").src = "arrowdown.png"; document.getElementById("box").style.display = "none"; } else { document.getElementById("arrow").src= "arrowup.png"; document.getElementById("box").style.display = "block"; } } </script> <img id="arrow" onclick="hide()" src="arrowdown.png" width="30" height="30"/> <div id="box" style="display:none;"> </div> please help me!! Edited August 1, 2015 by diiazopde Link to comment Share on other sites More sharing options...
Ingolme Posted August 1, 2015 Share Posted August 1, 2015 Like I said earlier, use getAttribute() for comparing the src. This is working for me: <script>function hide(){ if(document.getElementById("arrow").getAttribute("src") == "arrowup.png"){ document.getElementById("arrow").src = "arrowdown.png"; document.getElementById("box").style.display = "none"; } else { document.getElementById("arrow").src= "arrowup.png"; document.getElementById("box").style.display = "block"; }}</script><img id="arrow" onclick="hide()" src="arrowdown.png" alt="Arrow"><div id="box" style="display:none;">Content</div> Link to comment Share on other sites More sharing options...
diiazopde Posted August 1, 2015 Author Share Posted August 1, 2015 its work now, thank you it was getAttribute() Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now