img src variable not working in jQuery

Question

The application is working on dreamweaver but when I try it on Chrome or IE it dones't work. I know where the issue is but I don't now how to fix it. It has something to do with applying variable as an img src. The code is setup at http://jsfiddle.net/v9rxH/

the issue is in the line

 $(".topImage").attr("src", "'" + obj[randomNumA].urlTop + "'"); $(".middleImage").attr("src", "'" + obj[randomNumB].urlMiddle + "'"); $(".bottomImage").attr("src", "'" + obj[randomNumC].urlBottom + "'");

when the browser renders it is show

 <img src="'http://placehold.it/300x100&text=SecondBottom'" class="bottomImage">

it's adding additional single quotes(' ') in src. Based on that, I removed the single quotes and it shows the variable as text instead of it's value. What am I missing? Thanks in advance. Rex

Joe · Accepted Answer · 2012-02-17 19:52:56Z

You're putting the single quotes around it with "'" - you don't need to, using .attr() handles that for you:

$(".topImage").attr("src", obj[randomNumA].urlTop); $(".middleImage").attr("src", obj[randomNumB].urlMiddle); $(".bottomImage").attr("src", obj[randomNumC].urlBottom);

calebds · Accepted Answer · 2012-02-17 19:55:51Z

2

Remove single quotes from obj[randomNumN].urlTop.

See DEMO.

answered Feb 17, 2012 at 19:55

calebds

26.3k9 gold badges51 silver badges75 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-02-17 19:54:02Z

Try,

 $(".topImage").attr("src", obj[randomNumA].urlTop); $(".middleImage").attr("src", obj[randomNumB].urlMiddle); $(".bottomImage").attr("src", obj[randomNumC].urlBottom);

j08691 · Accepted Answer · 2012-02-17 19:56:54Z

Use this instead:

$(".topImage").attr("src", obj[randomNumA].urlTop); $(".middleImage").attr("src", obj[randomNumB].urlMiddle); $(".bottomImage").attr("src", obj[randomNumC].urlBottom);

jsFiddle example.

Collectives™ on Stack Overflow

img src variable not working in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related