Databases
StackOverflow2013
Postsdbo
POHow to change parentNode style attributes on childNode events
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to change parentNode style attributes on childNode events
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload