How to change style of elements that aren't "(obj)"

Question

I have multiple items in a row that I want to easily change the style of the border based on my selection.

Here is the HTML of just the row and some of the items in it:

<div class="items">
              <ul>
                <li class="item-hold">
                  <span class="item icon64x64">
                    <img class="item-img icon64x64" src="css/img/3001.png" alt="Abyssal Scepter" id="as">
                  </span>
                </li>
                <li class="item-hold">
                  <span class="item icon64x64">
                    <img class="item-img icon64x64" src="css/img/3020.png" alt="Sorcerer's Shoes" id="ss">
                  </span>
                </li>
                <li class="item-hold">
                  <span class="item icon64x64">
                    <img class="item-img icon64x64" src="css/img/3025.png" alt="Iceborn Gauntlet" id="ig">
                  </span>
                </li>
             </ul>
       </div>

I have tried to do if !(obj).style..... However that won't work and I cannot find any solutions anywhere.

I Know how to do this with states and cases. However, I didn't want my JS to be a few 100 lines long.

So here is my js

var as = document.getElementById('as');
var ss = document.getElementById('ss');
var ig = document.getElementById('ig');

as.addEventListener('click', function() {
  ItemDisc('as');
});
ss.addEventListener('click', function() {
  ItemDisc('ss');
});
ig.addEventListener('click', function() {
  ItemDisc('ig');
});

function ItemDisc(obj) {
  var change = document.getElementById(obj);
  var changeback = document.getElementById(!obj);
  change.style.border = "5px solid blue";
  for(!obj) {
    changeback.style.border = "5px solid blue";
  }
}

Where you have `var changeback = document.getElementById( !obj );`, what exactly are you trying to do there? If you are looking to add a border to the selected item it would be easier to select all items in the row, remove the selected style, then apply selected style to selected item. — hungerstar, Apr 19 '16 at 21:46
nope. that getElementByID(!obj) won't work. Because, there's more than one element to be selected and getElementById is meant to retrieve One ID. Check out this thread: http://stackoverflow.com/questions/14408891/getelementbyid-multiple-ids — admcfajn, Apr 19 '16 at 21:53

score 1 · Answer 1 · answered Apr 19 '16 at 22:14

This is a basic demo that could be improved upon.

The main idea is to loop through all the items and "reset" them to their default state. Then apply the selection style to the selected element.

<div class="items">
  <ul>
    <li>
      <img src="https://placehold.it/50x50&text=01">
    </li>
    <li>
      <img src="https://placehold.it/50x50&text=02">
    </li>
    <li>
      <img src="https://placehold.it/50x50&text=03">
    </li>
  </ul>
</div>

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 1rem;
}
.highlight {
  border: 2px solid red;
}

// Get all items.
var items = document.querySelectorAll( '.items li' );

// Adding/removing selection style via a CSS class.
function addHighlight() { 

  // Loop through all items and remove the selection class.
  for ( var i = 0, len = items.length; i < len; i++ ) {
    items[i].className = items[i].className.replace( 'highlight', '' );
  }

  // Add selection class to selected item.
  this.className += ' highlight';

}

// Add click event handler to items.
function addEventListener( items, event, listener ) {
    for ( var i = 0, len = items.length; i < len; i++ ) {
        items[ i ].addEventListener( event, listener );
    }
}

addEventListener( items, 'click', addHighlight );

Demo JSFiddle.

Works well, the first answer given is what i was looking for however this is still nice, and for a fact helps me on a separate file so thank you :) — James Norman, Apr 20 '16 at 13:28

score 1 · Answer 2 · answered Apr 19 '16 at 22:17

I dont understand what you are trying to do, so I can't recreate something in its entirety.

I can point you in the right direction though.

Your problem is on line

var changeback = document.getElementById(!obj)

!obj is being resolved to the Boolean 'false', and not the element you are selecting.

Furthermore, you are using 'for', when you should be using 'if' For is creating loops, and 'if' is for conditions

if(!obj) {
   changeback.style.border = "5px solid blue";
}

Also, the border color is exactly the same.

I think it is possible to achieve what you want by changing your ItemDisc(obj) function to this.

function ItemDisc(obj){
    element = document.getElementById(obj);
    if(element.classList.contains('active')){
        element.className += " active";
        element.style.border = "5px solid blue";
    } else {
        element.className = "";
        // Careful, because this will remove all classes from your element.
    }
}

Just wanted to say... This is without jQuery, also, you can make it easier by adding styles to your css class 'active' which included borders.

}

score 1 · Accepted Answer · answered Apr 19 '16 at 22:30

1

You can also use this as your JS:

    var imgs = document.getElementsByClassName('item-img');

    for(i=0; i<imgs.length; i++) {
        imgs[i].addEventListener('click', function(){
            for (i=0; i<imgs.length; i++)
                imgs[i].style.border='1px solid blue';
            this.style.border = '1px solid red';
        });
    }

answered Apr 19 '16 at 22:30

ahPo

374
3
9

Thank you so much, this is exactly what i wanted, simple, small and works. Thank you for getting back so quick it has helped me a ton :) – James Norman Apr 20 '16 at 13:27

score 0 · Answer 4 · answered Apr 19 '16 at 22:03

This is very simple to do with jQuery. I'd recommend learning jQuery because it will familiarize you with both css-selectors and JavaScript. Here's a boilerplate to get you started, please forgive any typos:

    <style>
        .active{border:5px solid #0000FF;}
    </style>

    $(".item-img").click(function(){
        .each(".item-img"){
            myFunction( $(this).attr("id") );
        }
    });

    function myFunction(theID){
        if( $(this).attr("id") == theID ){
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    }

You will want to load jQuery in your html. Also, you'll need to wrap the js above in:

    $(document).ready(function(){/*above code goes here*/});

How to change style of elements that aren't "(obj)"

4 Answers4