CODEWITHSUNDEEP
javascripthtml
Paul Taylor
Paul Taylor

Reputation: 13130

Why is relative url in html src attribute because full path in Javascript function

I have an image button when you click on it one of the things done is a javascript function is called to modify the image to indicate it has been clicked

HTML: 

<td><input type="image" onclick="toggleMe(this)" value="Tracks" src="../../images/open.png"/></td>

JS: 

function toggleMe(btn){
    btn.src = btn.src=="../../images/open.png" ? "../../images/close.png" : "../../images/open.png";
}

However it didnt work because although src was to set to a relative url the value the javascript function gets is the full path (http:localhost:8080/images/open.png). I fixed this locally by changing function to 

function toggleMe(btn){
    btn.src = btn.src=="http:localhost:8080/images/open.png" ? "http:localhost:8080/images/close.png" : "http:localhost:8080/images/open.png";
}

but this will not work in production environment because full url will be different.

So, does Javascript not receive relative path that was set in the html How do I fix this in a portable way

Upvotes: 0

Views: 247

Answers (2)

Bellash
Bellash

Reputation: 8204

I also faced these problems here is how solve them

First of all I identify what is different between two urls and in your case I can write this

 function toggleMe(btn){
btn.src = btn.src.indexOf("images/open.png")>-1 ? 
    btn.src.replace("images/open.png","images/close.png"):btn.src.replace("images/close.png","images/open.png");
}

Upvotes: 1

ArinCool
ArinCool

Reputation: 1738

You can do this alternative:

function toggleMe(btn){
  var srcStr = btn.src;
  var newImgStr = srcStr.indexOf("open.png")>=0 ? "close.png" : "open.png";
  srcStr = srcStr.replace("open.png", newImgStr);
  btn.src = srcStr;
}

Upvotes: 0

Related Questions