how to click any element and target will switch to it

Question

here is what i try to code i want my mouse click on any element on page and target will boxshadow , and after i click the element i can click another element and the previus element will lost its boxshadow and i am using code like this

  document.onclick = function(evt){ 
  console.log('clicked');
  var target = null,
  target = evt.target;
  var obj = document.querySelector(target);
  obj.style.boxShadow = '3px 10px 100px yellow';
  if(target === 'null'){
   console.log('ye');
  obj.style.boxShadow = '0'; 
  obj = document.querySelector(target) 
  console.log(obj)}     
   return target}

Answer 1

Add element selector once you have applied css and select those elements using provided selector.

Remove applied css by selecting applied attribute.

 document.onclick = function(evt) { var target = evt.target; var pastElems = document.querySelectorAll('.shadowed'); [].forEach.call(pastElems, function(el) { el.style.boxShadow = 'none'; target.classList.remove('shadowed'); }) target.style.boxShadow = '3px 10px 100px yellow'; target.classList.add('shadowed'); } 

 .elem { width: 100px; height: 100px; border: 1px solid black; float: left; } 

 <div class='elem'></div> <div class='elem'></div> <div class='elem'></div> <div class='elem'></div> 

Answer 2

It's easier to change styling by adding/removing classes.

If you use an object, it will allow you to keep track of what element currently has the shadow and remove the class from it.

var setBoxShadow = {
  target: null,
  clearShadow: function() {
     if (this.target != null && this.target != undefined) {
         this.target.classList.remove("highlight");
     }
  },
  addShadow: function(newTarget) {
      this.target = newTarget;
      this.target.classList.add("highlight");
  },
}

body.onclick = function(evt) {
  setBoxShadow.clearShadow();
  setBoxShadow.addShadow(evt.target);
}

And the CSS:

.highlight {
   box-shadow: 3px 10px 100px yellow;
}