title: Javascript onClick change background picture of div
body: <p>My ultimate goal is to change the background of a div through clicking on the sampla picture.</p>
  <p>First I wrote this:</p>
  <pre><code>&lt;a onclick=&quot;document.getElementById('sp').style.background=&quot;url('/assets/castle.png')&quot;&quot;&gt;...&lt;a&gt;
  </code></pre>
  <p>but it didn't work. I noticed that the problem was usage of multiple &quot; and '. So put the function into a script tag:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      var pic=&quot;&quot;;
      function showP(pic) { document.getElementById('sp').style.background='url(pic)';};
  &lt;/script&gt;
  
  &lt;a onclick=&quot;showP(/assets/castle.png)&quot;&gt;&lt;img src=&quot;/assets/castle.png&quot; width=&quot;50px&quot; height=&quot;50px&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>As supposed by seeing <code>/assets</code> dir, this is a rails app. I also tried o use jQuery selectors like <code>$(&quot;#sp&quot;).css()</code> or dropping the variable altogether and trying the function as:</p>
  <pre><code>function showp1() { document.getElementById('sp').style.cssText='background: transparent url(/assets/castle.png) no-repeat 0 0;'}
  </code></pre>
  <p>to try out solutions proposed in questions with similar titles but none did work. Whatever I try, on the html source, the portion <strong>showP(/assets/castle.png)&quot;</strong> below is marked red:</p>
  <pre><code>&lt;a onclick=&quot;showP(/assets/castle.png)&quot;&gt;&lt;img src=&quot;/assets/castle.png&quot; width=&quot;50px&quot; height=&quot;50px&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>Are there any suggestions?</p>