Jquery - changing background image - throws weird error

Question

Hi,

I have 4 list items in my HTML and there is image and a text in the Item. What I am trying to do is when someone clicks on the list item, I want to pull the text out of it and use it to form an image url and assign it to an element's background. But this simple stuff is not working and firefox is throwing a warning without changing the image:

reference to undefined property g[m] : Line 69 {this error is shown 3 times}
Error in parsing value for background-image. Declaration Dropped.

Here's my code:

<ul id="colorChoice">
  <li class="setGuideColor"><img src="a.png">Red</li>
  <li class="setGuideColor"><img src="b.png">Green</li>
  <li class="setGuideColor"><img src="b.png">Blue</li>
  <li class="setGuideColor"><img src="d.png">Gray</li>
  <li class="setGuideColor"><img src="e.png">Yellow</li>
</ul>

These are the list items.

$(".setGuideColor").click(function(){
  var img = '"url(' + $(this).text() + '.png)"';
  alert(img);
  $(".myElement").css("background-image",img);
})

This is the JQuery part. Here in when I alert the variable img, I get a path enclosed in double quotes and the URL of the image generated is absolutely right. I aint getting what is the issue.

Answer 1

A proper value for background-image would be:

url(somePath.png)

Where you seem to have:

"url(somePath.png)"

Lose the outer quotes.

Answer 2

$("#ColorOption").append('<ul id="colorChoice">
  <li class="setGuideColor"><img src="cyan.png">Cyan</li>
  <li class="setGuideColor"><img src="magenta.png">Magenta</li>
  <li class="setGuideColor"><img src="yellow.png">Yellow</li>
  <li class="setGuideColor"><img src="black.png">Black</li>
 </ul>');


$(".setGuideColor").click(function(){
  $(".drag-y").css("background-image",'url(' + $(this).text() + '.png)');
})

Hi thenduks , here's the original code.