How to change parentNode style attributes on childNode events
<p>Hey guys, I have a UL like so:</p>

<pre><code>&lt;ul id="list"&gt;
    &lt;li class="something"&gt;
        &lt;div class="btns" onclick="add(this)"&gt; + &lt;/div&gt;
        &lt;div class="btns" onclick="sub(this)"&gt; - &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="something new"&gt;
        &lt;div class="btns" onclick="add(this)"&gt; + &lt;/div&gt;
        &lt;div class="btns" onclick="sub(this)"&gt; - &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>CSS wise, the class 'something' contains a background image. </p>

<p>What I want to achieve here, is that when the add() or sub() function calls are made, the background-image property of the parentNode of the element that made the call changes...</p>

<p>So this way, I don't have to go around making ID's for each element, and can reuse the same functions...</p>

<p>What I have is something like this, but it doesn't work (rather, the code I've written is wrong):</p>

<pre><code>function add(x)
{
    var y = x.parentNode.style;

    if (y.backgroundImage == 'url("../assets/1.png")'
    {
        y.backgroundImage = 'url("../assets/2.png")';
    } else if (y.backgroundImage == 'url("../assets/2.png")'
        y.backgroundImage = 'url("../assets/3.png")';
    ...
    ... so on so forth...
}
</code></pre>

<p>The overall logic itself might be poor, so I'm open to new suggestions too...</p>

<p>Edit #1: Added more detail to explain current situation...</p>

<p>Essentially, there's a 3x3 grid which is populated with the li's, and the background image indicates the current quantity using dots. There're two buttons inside each li, to add and subtract. On click of each, the background image is supposed to change to denote the current quantity... And this has to be done independent of the different li's... </p>
