469,275 Members | 1,805 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,275 developers. It's quick & easy.

Switch IMG Src using JavaScript

3
I am trying to swap the source of the image in the image tag when the onclick event of the A HREF fires off. I know I should have this as a separate function as opposed to trying to do it inline, but that isn't a possibility for what I am doing. If I take out the image swap if, it fires correctly, but with it in, it isn't firing.

Here is the source:

Expand|Select|Wrap|Line Numbers
  1. <table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1>
  2. <tr bgcolor="AAAAFF">
  3. <td style="width: 25px"><a href="" 
  4.   onclick="
  5.     if (document.getElementById(\'offerHistory\').style.display == \'none\') 
  6.       {document.getElementById(\'offerHistory\').style.display = \'inline\';} 
  7.     else {document.getElementById(\'offerHistory\').style.display = \'none\';};
  8.     if (document.getElementById(\'offerHistory\').style.display == \'none\') 
  9.       { document.getElementById(\'offerHistImage\').SetAttribute("src", "./images/arrow-right-2.png";}
  10.     else{ document.getElementById(\'offerHistImage\').SetAttribute("src", "./images/arrow-right-2.png";};
  11.     return false;">
  12.     <img id="offerHistImage" src="./images/arrow-down-2.png" />
  13.     </a>
  14. </td>
  15. <td>Offer History</td>
  16. </tr>
  17. <tr><td colspan="2">
  18. <div id="offerHistory" style="display: none;">
  19. <table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1>
  20.  
Any ideas are greatly appreciated. :)
Sep 10 '10 #1
5 2255
Thew
69
Why is it all in a Onclick?

try to put it in a function:

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function fire {
  3.  
  4.  <!-- here your code -->
  5.  
  6. }
  7. </script>
  8. <button onclick="fire()">
Sep 10 '10 #2
sunfun
3
For the purposes of what I am trying to do it isn't possible to put it in a separate function.
Sep 10 '10 #3
JKing
1,206 Expert 1GB
A couple things here.
  • Double quotes inside the string aren't escaped
  • SetAttribute should be setAttribute
  • The brackets for setAttribute were never closed

Expand|Select|Wrap|Line Numbers
  1. <table border="1" bordercolor="dddddd" cellspacing="0" cellpadding="1">
  2. <tr bgcolor="AAAAFF">
  3. <td style="width: 25px"><a href="" 
  4.   onclick="
  5.     if (document.getElementById('offerHistory').style.display == 'none') 
  6. {
  7.     document.getElementById('offerHistory').style.display = 'inline';
  8. else 
  9. {
  10.     document.getElementById('offerHistory').style.display = 'none';
  11. }
  12. if (document.getElementById('offerHistory').style.display == 'none') 
  13.     document.getElementById('offerHistImage').setAttribute('src', './images/arrow-right-2.png');
  14. }
  15. else
  16.     document.getElementById('offerHistImage').setAttribute('src', './images/arrow-right-2.png');
  17. }
  18.     return false;">
  19.     <img id="offerHistImage" src="./images/arrow-down-2.png" />
  20.     </a>
  21. </td>
  22. <td>Offer History</td>
  23. </tr>
  24. <tr><td colspan="2">
  25. <div id="offerHistory" style="display: none;">
  26. <table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1>
  27.  
Sep 10 '10 #4
sunfun
3
I took the above suggestions and was able to move it to a function as shown below. I also made a few improvements for reusability sake. I still have 2 problems.

1) the image still doesn't swap.
2) the page refreshes. I was under the impression that if I returned false from the function, that it would not refresh the page. Am I mistaken??

TIA

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT LANGUAGE="javascript"> 
  2. <!--
  3. function divHideShow(divName, divImage) {
  4.     if (document.getElementById(divName).style.display == 'none') {
  5.         document.getElementById(divName).style.display = 'inline';
  6.         document.getElementById(divImage).setAttribute('src', 'images/expand.png');
  7.     } else {
  8.         document.getElementById(divName).style.display = 'none';
  9.         document.getElementById(divImage).setAttribute('src', 'images/contract.png');
  10.     }
  11.     return false;
  12. }
  13. //--> 
  14.  
  15. </SCRIPT> 
  16.  
  17.  
  18. <table border="1" bordercolor="dddddd" cellspacing="0" cellpadding="1"> 
  19. <tr bgcolor="AAAAFF"> 
  20. <td style="width: 25px"> 
  21. <a href="" onClick="divHideShow('Report_-_By_Time')"><img id="Report_-_By_Time_Img" src="./images/expand.png" /></a> 
  22. </td> 
  23. <td>Report - By Time</td> 
  24. </tr> 
  25. <tr> 
  26. <td colspan="2"><div id="Report_-_By_Time" style="display: inline;"> 
  27. <table border=1 bordercolor="dddddd" cellspacing=0 cellpadding=1><tr><td>something</td></tr> 
  28.  
Sep 16 '10 #5
JKing
1,206 Expert 1GB
Your function takes two parameters and you only pass it one.
Sep 17 '10 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by webstar | last post: by
1 post views Thread by ochulus | last post: by
1 post views Thread by Utada P.W. SIU | last post: by
2 posts views Thread by Kent Lewandowski | last post: by
8 posts views Thread by dbaplusplus | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.