Adding new classes when user changes type

Question

I posted a similar question yesterday and got some helpful responses but the problem I am having now is slightly different. When the user changes the type on the UI, classes are added to the html elements (this simply adds a blue border around the element). I'm not receiving any error messages but it's just not doing anything.

document.querySelector(DOM.inputType).addEventListener('change', function() {
  if (usersInput.type === "Health") {
    document.querySelector('.input_type').className += " blue";
    document.querySelector('.input_activity').className += " blue";
    document.querySelector('.input_time').className += " blue";
    document.querySelector('.input_end').className += " blue";
    document.querySelector('.input_btn').className += " blue_btn";
  }
});

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

.blue_btn {
  color: blue;
}

<div class="input">
  <select class="input_type" id="input_type" name="input_type" style="height:36px" placeholder="Type" required>
  </select>
  <input class="input_activity" type="text" name="activity" placeholder="What do you need to do?" size="60" style="height:32px" required>
  <select class="input_time" name="Time" style="height:36px" required>
    <option value="Start">Start</option>
  </select>
  <select class="input_end" name="end" style="height:36px" required>
    <option value="End">End</option>
  </select>
  <input class="input_btn" type="button" value="Submit!">
</div>

Here is where usersInput comes from:

var usersInput = UICtrl.getInput();

Here is where 'getInpu't comes from:

return {
    getInput: function() {
        return {
            type: document.querySelector(DOMstrings.inputType).value,
            activity: document.querySelector(DOMstrings.inputActivity).value,
            startTime: document.querySelector(DOMstrings.inputStart).value,
            endTime: document.querySelector(DOMstrings.inputEnd).value
        };
    },
},

These are the options to select from the 'type' drop down menu:

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

Please note, I have checked similar questions on the forum but none that I have found have really answered my question. Thanks in advance for your support!

Use `.classList.add('blue')` instead of `.className += " blue"` and fix `document.querySelector(DOM.inputType)` as @Gerard warning. — Rafael Perozin, Sep 20 '19 at 09:54
DOM.inputType contains the DOM string 'type' which the user inputs. I haven't included all the Javascript code otherwise my post would be very long! — , Sep 20 '19 at 09:56
@BraDev I have implemented the changes you suggested but it still doesn't work? Any other ideas? The DOM.inputType contains the type that the user inputs — , Sep 20 '19 at 09:59
@PaulBailey the dns_nx did a full answer exactly about what I'm saying. — Rafael Perozin, Sep 20 '19 at 11:36

score 1 · Answer 1 · answered Sep 20 '19 at 11:03

It's a bit hard to say exactly what the issue is as I can't see where the different parts of your JS are running... However, my best guess is either:

You haven't got your value set correctly on your select element (your options are not visible in the HTML provided, I assume they are added via some JS?). Your option needs to have the "Health" value:

    <option value="Health">Health<option>

You are calling this line at the wrong time:

   var usersInput = UICtrl.getInput();

Try calling this function as the first line inside your event listener, this is because you want to grab the DOM state at that particular moment in time:

document.querySelector(DOM.inputType).addEventListener('change', function() {
  var usersInput = UICtrl.getInput();

  if (usersInput.type === "Health") {
    document.querySelector('.input_type').className += " blue";
    document.querySelector('.input_activity').className += " blue";
    document.querySelector('.input_time').className += " blue";
    document.querySelector('.input_end').className += " blue";
    document.querySelector('.input_btn').className += " blue_btn";
  }
});

There is a spelling error in you DomStrings object properties or your DOM.inputType property.

It seems as though putting the var usersInput = UICtrl.getInput(); within the even listener function worked. Does the event listener function not follow the same rules as closures? I thought that this inner function would have access to the outer functions variables? — , Sep 20 '19 at 11:15
it does have access to those variables, however your `usersInput.type` will be stale unless you get the values (which is what you're doing in your `getInput` method) when the value is actually changed, if that makes sense? — SeanDemps, Sep 20 '19 at 11:19
I think I understand....so when the event listener function is invoked (when the user 'changes' the value) the 'getInput' function is invoked and thus, the users input is retrieved. Is that correct? — , Sep 20 '19 at 11:35

dns_nx · Answer 2 · 2019-09-20T10:52:31.017

This should work for your needs, but it depends on how your <option>'s look like in the <select> element. In my example they look like this. But I'm just assuming this, because this information in the original post:

<option value="">Please select</option>
<option value="Health">Health</option>
<option value="Soemthing">Soemthing</option>

In the code below, I'm checking the value of the <option> with

...      
if (this.value === "Health") {
...

but you can also check the text of the <option> value with

...
if (this.options[this.selectedIndex].text == "Health") {
...

See & check the code

var element = document.getElementById('input_type');
if(element !== null) {
  element.addEventListener('change', function() {
    if (this.value === "Health") {
      document.querySelector('.input_type').classList.add('blue');
      document.querySelector('.input_activity').classList.add('blue');
      document.querySelector('.input_time').classList.add('blue');
      document.querySelector('.input_end').classList.add('blue');
      document.querySelector('.input_btn').classList.add('blue');
    }
    else {
     document.querySelector('.input_type').classList.remove('blue');
      document.querySelector('.input_activity').classList.remove('blue');
      document.querySelector('.input_time').classList.remove('blue');
      document.querySelector('.input_end').classList.remove('blue');
      document.querySelector('.input_btn').classList.remove('blue');
    }
  });
}

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

.blue_btn {
    color: blue;
}

<div class="input">
  <select class="input_type" id="input_type" name="input_type" style="height:36px" placeholder="Type" required>
    <option value="">Please select</option>
    <option value="Health">Health</option>
    <option value="Soemthing">Soemthing</option>
  </select>
  <input class="input_activity" type="text" name="activity" placeholder="What do you need to do?" size="60" style="height:32px" required>
  <select class="input_time" name="Time"  style="height:36px" required>
    <option value="Start">Start</option>
  </select>
  <select class="input_end" name="end" style="height:36px" required>
    <option value="End">End</option>
  </select>
  <input class="input_btn" type="button" value="Submit!">
</div>

If the answer solved your problem, please do not forget to mark it as answer. Thanks! — dns_nx, Sep 20 '19 at 11:21

score 0 · Answer 3 · edited Sep 20 '19 at 11:36

I have resolved it with the help of all of you! I should have used usersInput.type rather than usersInput.value. Also the var usersInput = UICtrl.getInput();, needed to be within the event listener function. I always thought that the event listener functions are essentially closures so should therefore have access to the outer functions variables...maybe I am wrong!

here is the new JS code:

var element = document.getElementById('input_type');
if (element !== "Type") {
    element.addEventListener('change', function() {
        var usersInput = UICtrl.getInput();
        if (usersInput.type === "health") {
            document.querySelector('.input_type').classList.add('blue');
            document.querySelector('.input_activity').classList.add('blue');
            document.querySelector('.input_time').classList.add('blue');
            document.querySelector('.input_end').classList.add('blue');
            document.querySelector('.input_btn').classList.add('blue');
        }
    });
}

score -1 · Answer 4 · answered Sep 20 '19 at 10:07

-1

It is because there is nothing like usersInput. usersInput is undefined and hence not able to match your if condition which is the reason it is not working. In order to get the value that the user selects you can use this.value. Therefore your code needs a little tweak here. Instead of this

if (usersInput.type === "Health") {

change it to this

if (this.value === "Health") {

answered Sep 20 '19 at 10:07

Divyesh Puri

196
8

I will edit my post to explain where 'usersInput' comes from – Sep 20 '19 at 10:13
Why not just get the arguments from the target attribute of the event? – Divyesh Puri Sep 20 '19 at 10:37

Adding new classes when user changes type

4 Answers4