Adding CSS class in Vanilla JS to querySelectorAll results


#42

this is my full HTML:

<html>
	<head></head>
	<body>
<select class="flex_select">
    <option value="con_1">One</option>
    <option value="con_2" selected="selected">Two</option>
    <option value="con_3">Three</option>
</select>
<div class="flex_parent"></div>
<script>
  var select = document.querySelector('select') // use more specific selector here
  var classTwo = document.querySelector('.flex_parent')

function checkSelect () {
  if (event.target.value === 'con_2') {
     classTwo.classList.add('flex_parent_2')
 }else if (event.target.value === 'con_3') {
     classTwo.classList.add('flex_parent_3')
 }else if (event.target.value === 'con_1') {
     classTwo.classList.remove('flex_parent_3', 'flex_parent_2')
 }
}
select.addEventListener('change', checkSelect);
</script>
</body>
</html>

This code works.
If that doesn't work, you've got a collision somewhere else in your code, or you've put your script tag above your HTML elements, causing them to not exist when you try and target the elements.


#43

Custom.js loads after the whole HTML loads - The wordpress way:

wp_register_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.1', true );

Uncaught TypeError: Cannot read property 'target' of undefined
at checkSelect (custom.js?ver=1.1:248)
at custom.js?ver=1.1:257

Could this be an issue:
event.target.value


#44

are you using my code, or the one you posted?


#45

Yes. Thats true.


#46

The problem is that the drop drowns is working, and the second condition is also getting selected, but when the page load the class that should be injected when the second condition is true is not getting inserted.

however If I select condition 3 and then select condition 2then it gets injected.

I tried this:

var defult_id='con_2';
document.getElementById(defult_id).selected = "true";

But that also didnt worked.


#47

If you're going to set the second element as the initial state, start your div with the 'flex_parent_2' class already applied, rather than expecting Javascript to do it.

<div class='flex_parent flex_parent_2'>

The reason the code fails to run on page load is that your code is looking for event.target - if you just call the function rather than it being triggered by an event, event.trigger doesnt exist (event doesnt exist at all.)


#48

whats the solution?


#49

Well, two solutions - one, put the initial class into the div element as i stated, and DONT run the code on load - it doesnt need to be run, the div already has the class it should have.

The other solution is to rewrite the function to be event-neutral, and instead target the select box by its selector (which you've already defined as 'select'), so instead of event.target.value, it would be select.value.

Using event.target makes the code more flexible - if you wanted to put it onto multiple dropdowns on the same page, for example.


#50

I visualized this before, but I am sure that there must be some way other than this.


#51

The other way, as i said, is just to replace event.target with select in the function.


#52

Tried. It didn't meet the objective.


#53

works fine for me....


#54

by default class 2 is not injecting on page load.


#55

the condition:

It should be red now initially.


#56

Ah. We took the flat call out previously. If you want it to fire on load again, put it back in.


#57

means? You are talking to a novice sir.


#58

See the bottom of the codepen.


#59

Mission accomplished!


#60

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.