I've got a little code snippet to 'hack' away at some templated code I can't fix normally.

<script>
jQuery( document ).ready(function() {
    jQuery(".avatar").each(function() {
        var text = jQuery(this).attr("src");
        text = text.replace("-64x64.jpg", ".jpg");
        text = text.replace("-80x80.jpg", ".jpg");
        text = text.replace("-32x32.jpg", ".jpg");
        text = text.replace("-28x28.jpg", ".jpg");
        text = text.replace("-16x16.jpg", ".jpg");
        text = text.replace("-128x128.jpg", ".jpg");
        jQuery(this).attr("src", text);
    });
});
</script>

Upon this script above firing in the browser I'm getting the following error in the console:

TypeError: text is undefined
text = text.replace("-64x64.jpg", ".jpg");

Racking my brain but ing up with nothing. Tried using var text; to try and define it at the start of the script and also tried using a different variable name in case it was conflicting with something both of which did nothing....

I've got a little code snippet to 'hack' away at some templated code I can't fix normally.

<script>
jQuery( document ).ready(function() {
    jQuery(".avatar").each(function() {
        var text = jQuery(this).attr("src");
        text = text.replace("-64x64.jpg", ".jpg");
        text = text.replace("-80x80.jpg", ".jpg");
        text = text.replace("-32x32.jpg", ".jpg");
        text = text.replace("-28x28.jpg", ".jpg");
        text = text.replace("-16x16.jpg", ".jpg");
        text = text.replace("-128x128.jpg", ".jpg");
        jQuery(this).attr("src", text);
    });
});
</script>

Upon this script above firing in the browser I'm getting the following error in the console:

TypeError: text is undefined
text = text.replace("-64x64.jpg", ".jpg");

Racking my brain but ing up with nothing. Tried using var text; to try and define it at the start of the script and also tried using a different variable name in case it was conflicting with something both of which did nothing....

• javascript
• jquery

• 1 Can you provide the html? – tliokos Commented Sep 6, 2013 at 9:49

1 Answer 1

This means that at least one of the elements with class avatar does not have a src attribute. attr returns undefined if the element in question doesn't have the attribute at all.

You can put a guard in (if (text)). Here's an example. Also note that there's zero reason to use jQuery(this).attr("src"); just use this.src:

jQuery( document ).ready(function() {
    jQuery(".avatar").each(function() {
        if (this.src) {
          this.src = this.src.replace("-64x64.jpg", ".jpg")
                             .replace("-80x80.jpg", ".jpg")
                             .replace("-32x32.jpg", ".jpg")
                             .replace("-28x28.jpg", ".jpg")
                             .replace("-16x16.jpg", ".jpg")
                             .replace("-128x128.jpg", ".jpg");
        }
    });
});

You can also probably make that code a bit more robust using a regular expression:

jQuery( document ).ready(function() {
    jQuery(".avatar").each(function() {
        if (this.src) {
          this.src = this.src.replace(/-(\d+x\d+)\.jpg$/, ".jpg");
        }
    });
});

That will replace -DIGITSxDIGITS.jpg with .jpg, without being specific about what the digits in each case are. \d means "any digit", and the + after it means "one or more".