javascript - How to change parentNode style attributes on childNode events -

hey guys, have ul so:

<ul id="list">     <li class="something">         <div class="btns" onclick="add(this)"> + </div>         <div class="btns" onclick="sub(this)"> - </div>     </li>     <li class="something new">         <div class="btns" onclick="add(this)"> + </div>         <div class="btns" onclick="sub(this)"> - </div>     </li> </ul> 

css wise, class 'something' contains background image.

what want achieve here, when add() or sub() function calls made, background-image property of parentnode of element made call changes...

so way, don't have go around making id's each element, , can reuse same functions...

what have this, doesn't work (rather, code i've written wrong):

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")';     ...     ... on forth... } 

the overall logic might poor, i'm open new suggestions too...

edit #1: added more detail explain current situation...

essentially, there's 3x3 grid populated li's, , background image indicates current quantity using dots. there're 2 buttons inside each li, add , subtract. on click of each, background image supposed change denote current quantity... , has done independent of different li's...

i agree robg using classes better suited - if ever decide use framework. in off-case don't want here other ways:

updated computed styles - leaving commented version @ bottom of post: main difference in 1 gets background image of inline-style or computed version (if being set class example).

for getting computed styles, take @ quirksmode.org. in particlar bottom of getstyles page.

here fiddle not working in jsfiddle (bit tired think has me using ie6 @ work...), works fine if locally in normal setting.

function add(x) {     var parent = x.parentnode;     var y = parent.currentstyle['backgroundimage'] || document.defaultview.getcomputedstyle(parent,null).getpropertyvalue('backgroundimage');     switch(true)     {         case (y.indexof("1.png")!=-1):             parent.style.backgroundimage = 'url("http://www.wskidmore.com/2.png")';             break;         case (y.indexof("2.png")!=-1):             parent.style.backgroundimage = 'url("http://www.wskidmore.com/3.png")';             break;         case (y.indexof("3.png")!=-1):             parent.style.backgroundimage = 'url("http://www.wskidmore.com/1.png")';             break;     } }  

outdated, commented logic.

function add(x) {         var y = x.parentnode.style.backgroundimage;     // using indexof avoid possible quote issue , possibly other odd browser quirks     // switch true means first case finds evaluates true     switch(true)     {         // indexof means looks through string given substring         // , returns position so, "abc".indexof("b") returns 1 (its 0 based)         // if doesnt find anywhere returns -1         // our switch, looks inside backgroundimage string         // url("../assets/x.png") no-repeat 50% 50%         // or whatever may part "1.png"         // if finds it, return 5, or 8, or whatever position         // if not returns -1         // when gets evaluated check "not -1"         case (y.indexof("1.png")!=-1):           // if case true, between : , break;           // performed, exits switch           y = 'url("../assets/2.png")';           break;               case (y.indexof("2.png")!=-1):           y = 'url("../assets/3.png")';           break;               case (y.indexof("3.png")!=-1):           y = 'url("../assets/4.png")';           break;           } }