Javascript eventListener not changing CSS as expected

Question

I have a question regarding using a javascript event listener to change the CSS style of some elements.

Currently I have a form with 3 styled buttons on it that look like this: The user can select 1,2, or all 3 with the select all checkbox.

<button type="button" class="myButton" id="skype">Skype ping</button>
<button type="button" class="myButton" id="returnedim">Returned IM</button>
<button type="button" class="myButton"id="complaint">CallerComplaint</button> 
 All of the above <input type="checkbox" value="all" name="all" id="allReasons">

<input type="hidden" name="contacthidden1" value="">                        
<input type="hidden" name="contacthidden2" value="">
<input type="hidden" name="contacthidden3" value="">

My issue is occuring with the 'all' selection. It is not applying the CSS as I expect it to. I have a class called 'clicked' that turns the style of the button green and an unclicked class that turns it back to original color.

I am running into issues where a user can select one or two items and have the clicked class color applied and then if 'all' is clicked it throws the css styling out of whack were some buttons are styled green and some are not.

Here is the code in question:

 var contactArray = ["skype", "returnedim", "complaint"];

    document.getElementById('allReasons').addEventListener('change', function() {
            if (document.getElementById("allReasons").checked == true) {

                //If 'All' is checked then any previously checked items should be reset to default state first

                for (var i = 0, len=contactArray.length; i<len; i++){
                   resetClickedClass(contactArray[i]);
                    alert('1');
                   setClickedClass(contactArray[i]);
                    alert('2');
                }

                $('input[name=contacthidden1]').val("Skype Ping");
                $('input[name=contacthidden2]').val("Returned IM");
                $('input[name=contacthidden3]').val("Caller Complaint");
            } else {
                //Reset values to nothing when unchecked
                for (var i = 0, len=contactArray.length; i<len; i++){
                    resetClickedClass(contactArray[i]);
                }
                $('input[name=contacthidden1]').val("");
                $('input[name=contacthidden2]').val("");
                $('input[name=contacthidden3]').val("");
            }
        })

        function resetClickedClass(selector){
            $("#" + selector).toggleClass("unclicked");
        }

        function setClickedClass(selector){
            $("#" + selector).toggleClass("clicked");
        }

I want to make sure in the event listener if 'all' is selected that the colors on each item are reset to original state before toggling the clicked class. I added alerts in the the loop to make sure that everything is firing off and it is however the colors are still not resetting properly if a user selects an item then its the 'all' check box.

Why are you not using checkboxes? Labels can be styled to look like buttons.... — epascarello
– epascarello, Commented Aug 24, 2017 at 15:32
The buttons are 'prettier' and the team that will use it would prefer them then a plain form — Nick Codes
– Nick Codes, Commented Aug 24, 2017 at 15:34
Your reset and click is calling toggle.... makes no sense, should be add or remove.... — epascarello
– epascarello, Commented Aug 24, 2017 at 15:36
The functionality you want is that of checkboxes, please check the answers to this question before deciding on using buttons, which is kind of a hack. — James
– James, Commented Aug 24, 2017 at 15:40

epascarello · Accepted Answer · 2017-08-24 15:38:39Z

1

Answer is simple... you are saying you want to remove the class, but instead you are calling the toggle method.

    function resetClickedClass(selector){
        $("#" + selector).toggleClass("unclicked");  <-- should be removeClass
    }

    function setClickedClass(selector){
        $("#" + selector).toggleClass("clicked");   <-- should be addClass
    }

answered Aug 24, 2017 at 15:38

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript eventListener not changing CSS as expected

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related