Find and replace in Javascript

sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580
Hello people, I have this function:
Code:
function flip_image() {
	var zoomed_image = document.getElementById('zoomed_image').src;
	var zoomed_link = document.getElementById('zoomed_link').href;
	if (zoomed_image.search("-back") > 0) {
		zoomed_image.replace(".jpg","-back.jpg");
		zoomed_link.replace(".jpg","-back.jpg");
	} else {
		zoomed_image.replace("back","");
		zoomed_link.replace("back","");
	}
}
Basically, if the src/href contains '-back', remove it. If it doesn't, add it. What I am doing wrong here?
 

sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580


Isn't it that one about halfway down under 'String Object Methods'? It was actually w3schools I found the function on :) I did spot indexOf also though, maybe it's worth a shot.
 

sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580


Hehe me too :) With Javascript I'm usually just missing something obvious. I'm not a Javascript developer at all (not even close) so I pretty much just muddle through... PHP is so much more helpful with the error reporting.
 

sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580
Removed the variables to boil it down as basic as possible...

Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function flip_image() {
    if (document.getElementById('zoomed_image').src.search("-back")) {
        document.getElementById('zoomed_image').src.replace("back","");
        document.getElementById('zoomed_link').href.replace("back","");
    } else {
        document.getElementById('zoomed_image').src.replace(".jpg","-back.jpg");
        document.getElementById('zoomed_link').href.replace(".jpg","-back.jpg");
    }
}
</script>
</head>
<body>
<a onclick="flip_image()" href="#">test</a>
<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" id="zoomed_link">
	<img src="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg"  id="zoomed_image"/>
</a>
</body>
</html>

Still no effect... :-(
 

majestic1805

Honorable
Oct 1, 2012
69
0
10,590
2 things...

1) First, your search line in if contains no test. As long as it doesn't fail it will always return true. Add a check for " > -1."

2) JavaScript is a functional language and operates on returned values. So, your calls to replace do nothing except return a string. You need to set those attributes to that returned value rather than simply calling the replace function.
 

sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580
Ah thanks dude, appreciate it! :-D Here's the working solution:

Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function flip_image() {
	var zoomed_image = document.getElementById('zoomed_image').src;
	var zoomed_link = document.getElementById('zoomed_link').href;
    if (zoomed_image.search("-back") > 0) {
        document.getElementById('zoomed_image').src = zoomed_image.replace("-back","");
        document.getElementById('zoomed_link').href = zoomed_link.replace("-back","");
    } else {
        document.getElementById('zoomed_image').src = zoomed_image.replace(".jpg","-back.jpg");
        document.getElementById('zoomed_link').href = zoomed_link.replace(".jpg","-back.jpg");
    }
}
</script>
</head>
<body>
<a onclick="flip_image()" href="#">test</a>
<a href="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/zoom/01.jpg" id="zoomed_link">
	<img src="http://justjamie.scsmarketing.net/images/gallery/menswear/coats/large/01.jpg"  id="zoomed_image"/>
</a>
</body>
</html>
 

sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580


That's weird because it's working correctly with 0... -1 is what it returned though when I echoed it. Wasn't sure how to write it though - as == -1 it looks like the minus would work as the math operator? And in quotes wouldn't it be treated as a string? I think in PHP I could get away with doing that, but the slightest mistake with Javascript and it just seems to break. Thanks for your help with this, really appreciate it :)
 

randomizer

Distinguished
It's working correctly because "-back" is never at the start of the filename. Search() returns the position of the matching substring, and it can be anywhere from index 0 onwards. If it doesn't exist, the method returns -1.

Essentially, you will want to change your test to be:

Code:
zoomed_image.search("-back" ) >= 0

or:

Code:
zoomed_image.search("-back" ) > -1

Both are equivalent and it's more down to preference which you choose to use. I personally prefer to use the latter because -1 stands out as an obvious (at least in common JS methods) sentinel value.

Note that you should also probably use the indexOf method rather than search. Search actually takes a regular expression and tries to match it, whereas indexOf looks for a plain string. Since you are clearly looking for the index of (see, they named it well) a string and not some pattern, you should use the right method for the job. Also, while it probably doesn't matter in your case, indexOf is a much, much faster method than search.
 

sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580
Thanks to both of you for the advice, I hugely appreciate it :) It's been educational for me, also learnt about timeOut functions too (I needed this to execute after something else did) so I've learnt a lot. Will probably have forgotten it by the next time I need to write some Javascript but you never know!

Randomizer/majestic1805, if you post my solution with that correction then I can select that as best answer (don't think I can choose myself as best answer?). Then randomizer can feel free to rename the thread with [Solved] or let me know how to do that.