3

I have used bootstrap to create circular button with glyphicons and i want to change color of the button including glyphicon color as well. but when i click on glyphicon, onlclick event works for glyphicon only and not button. http://embed.plnkr.co/E1dUnkW1tmOCWqYkRaG5/

function setColor(e) {
    var target = e.target,
        status = e.target.classList.contains('btn-success');

    e.target.classList.add(status ? 'btn-default' : 'btn-success');
    e.target.classList.remove(status ? 'btn-success' : 'btn-default');
}

my bootstrap button

<button onclick="setColor(event)" type="button" class="btn btn-circle btn-lg"><span class="glyphicon glyphicon-search" style="margin: 0 0px;"></span></button>
ch3t
  • 466
  • 5
  • 15

4 Answers4

7

Well it works, but Event.target is the element that fired/dispatched the event, and not the element you attached the listener to.

You are looking for Event.currentTarget:

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

So change your code to:

function setColor(e) {
  var currentTarget = e.currentTarget,
      status = e.currentTarget.classList.contains('btn-success');

  e.currentTarget.classList.add(status ? 'btn-default' : 'btn-success');
  e.currentTarget.classList.remove(status ? 'btn-success' : 'btn-default');
}
t.niese
  • 39,256
  • 9
  • 74
  • 101
5

Just add "pointer-events:none" to your glyphicon:

<span class="glyphicon glyphicon-search" style="margin: 0 0px;pointer-events:none"></span>
Henry Tran
  • 526
  • 3
  • 12
  • I was using e.target while listening for certain click events on the document. chrome and IE were reacting differently and chrome would pick up the glyphicon as the element if the mouse clicked the glyphicon rather than the button holding the glphyicon. This solved my problem - thanks! – hackingchemist Jul 03 '18 at 13:46
0

This will do the trick:

function setColor(e) {
    var target = e.target, status;

    if(target.tagName == 'BUTTON') {
      status = e.target.classList.contains('btn-success');
      e.target.classList.add(status ? 'btn-default' : 'btn-success');
      e.target.classList.remove(status ? 'btn-success' : 'btn-default');
    } else {
      status = e.target.parentElement.classList.contains('btn-success');
      e.target.parentElement.classList.add(status ? 'btn-default' : 'btn-success');
      e.target.parentElement.classList.remove(status ? 'btn-success' : 'btn-default');
    }
}
Deepak Biswal
  • 4,280
  • 2
  • 20
  • 37
  • This will only work if it is guaranteed that it is the `parentElement` but this, but if the OP decides to add another wrapper inside of the `btn` then the script will fail again. It will also fail if the click happens outside of the glyph directly on the btn. – t.niese Nov 10 '15 at 07:37
  • Yes, that's true but as per HTML provided `` by OP I have added my answer! – Deepak Biswal Nov 10 '15 at 07:44
  • Yes, but now it will now fail for the click on the button itself (if you don't click on the glyph directly, but on the area that is the button but not the glyph) – t.niese Nov 10 '15 at 07:47
0

Use JQuery

<script>  
function setColor(e) {
    var target = e.target,
        status = $(e.target).hasClass('btn-success');

   $(e.target).addClass(status ? 'btn-default' : 'btn-success');
    $(e.target).addClass(status ? 'btn-success' : 'btn-default');
}
</script>

Also remember that once a class is assigned the class exists on that element during runtime. Removing a class is something to be added i think.

Other option is to add the button itself as an argument

<button onclick="setColor(this)" type="button" style="width: 50px; height: 50px; margin: 10px; padding: 10px 16px;  font-size: 18px; line-height: 1.33; border-radius: 25px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);" class="btn btn-circle btn-lg"><span class="glyphicon glyphicon-search" style="margin: 0 0px;"></span></button>

<script>


function setColor(btn) {
    var status = $(btn).hasClass('btn-success');

   $(btn).addClass(status ? 'btn-default' : 'btn-success');
    $(btn).addClass(status ? 'btn-success' : 'btn-default');
}
</script>

And to be complete i believe you want this?

<button onclick="setColor(this)" type="button" style="width: 50px; height: 50px; margin: 10px; padding: 10px 16px;  font-size: 18px; line-height: 1.33; border-radius: 25px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);" class="btn btn-circle btn-lg"><span class="glyphicon glyphicon-search" style="margin: 0 0px;"></span></button>

<script>


    function setColor(btn) {      
       $(btn).toggleClass('btn-success');
    }
    </script>
YANTHO
  • 89
  • 7