Adding classes to html using Javascript

Question

I am trying to add a class to a html element so that when the user selects a certain type from the drop down list on the UI, the border of the 'type' box changes color. I'd thought I had coded it correctly but I can't seem to get it working.

Here's the css:

.blue {
    border: px solid blue !important;
}

Here's the html:

<select class="input_type" name="input_type" style="height:36px" placeholder="Type" required>
                    <option value="Type">Type</option>
                    <option value="health">Health</option>
                    <option value="work">Work</option>
                    <option value="leisure">Leisure</option>
                </select>

Here's the Javascript:

changedType: function(type) {

            if (type === "health") {
                var blueBox = document.querySelector('.inputType');
                blueBox.addClass('blue');

             }

         },

Here's where the method is called:

document.querySelector(DOM.inputType).addEventListener('change', UICtrl.changedType(usersInput.type));

Any ideas? Thanks for your help in advance!

You're saying `blueBox.addClass('blue');` but that's the jquery way to add a class. Check this out: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList — justDan, Sep 19 '19 at 13:55
`addClass` is a jQuery function. You want [`.classList.add`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Methods). — Heretic Monkey, Sep 19 '19 at 13:55
`document.querySelector(DOM.inputType).addEventListener('change', UICtrl.changedType(usersInput.type))` **calls** `UICtrl.changedType` and passes its return value into `addEventListener`. If you want to call that function when the event occurs, you need to wrap that in a function. See [the linked question](https://stackoverflow.com/questions/27643714/)'s answers, but for instance: `document.querySelector(DOM.inputType).addEventListener('change', function() { UICtrl.changedType(usersInput.type); });` (And, of course, the `addClass` issue raised above.) — T.J. Crowder, Sep 19 '19 at 13:57
@T.J.Crowder :) I removed it when I saw your comment, as I agreed. Here's the other dupe: https://stackoverflow.com/q/507138/215552 — Heretic Monkey, Sep 19 '19 at 14:00
Thanks for all your responses everyone!! I have amended the code to reflect your suggestions but it's still not working? Any other ideas? — , Sep 19 '19 at 14:09
Thanks for this @kah608. I implemented your code as a method rather than a function like this: changedType: function(event) { console.log(event.target.value); if (event.target.value === "health") { event.target.className += ' blue'; } else { event.target.className = 'input_type'; } console.log(event.target.className); }, and then I called the method like this: var el = document.querySelector('.input_type'); el.addEventListener("change", function() { UICtrl.changedType(), false }); but it just says 'Cannot read property 'target' of undefined' — , Sep 19 '19 at 14:39
You're not passing the event from the event listener to your `changedType` function: `el.addEventListener("change", function(e) { UICtrl.changedType(e) }, false);` Note that you also had the `false` in the wrong place. — Heretic Monkey, Sep 19 '19 at 18:48
@Heretic Monkey Thank you so much! This makes sense. Can I ask what the 'false' actually does and why is it necessary to have it there? — , Sep 20 '19 at 08:06
The best place I've found is [MDN's documentation on `addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters). You want to look at the `useCapture` parameter. — Heretic Monkey, Sep 20 '19 at 12:14

Adding classes to html using Javascript

0 Answers0