How to set up a change event with a nested toggle event?

Question

In the snippet below, I have a select menu. When 'Create Agency' is selected, then the red square should display.

Doing something like this in jQuery would be...

const agencyId = document.querySelector("#agencyId");
const addAgencyForm = document.querySelector("#addAgencyForm");

$('#agencyId').on('change', () => {
  $('#addAgencyForm').toggle(this);
});

...but I need to do this with Vanilla JavaScript.

Converting the .on() method with a nested toggle... this is as far as I can get:

const agencyId = document.querySelector("#agencyId");
const addAgencyForm = document.querySelector("#addAgencyForm");

agencyId.addEventListener("change", (event) => {
  if (event.target && event.target.id == "agencyId") {
    addAgencyForm.classList.toggle("d-block");
  }
});

How do I properly convert this .on() w/ nested .toggle() method to vanilla JS?

const agencyId = document.querySelector("#agencyId");
const addAgencyForm = document.querySelector("#addAgencyForm");

agencyId.addEventListener("change", (event) => {
  if (event.target && event.target.id == "agencyId") {
    addAgencyForm.classList.toggle("d-block");
  }
});

.box {
  height: 100px;
  width: 100px;
  background-color: red;
}

.d-none {
  display: none;
}

WillD · Answer

If I understand correctly you have it nearly correct, but you have the wrong class passed as argument to the classlist.toggle() method.

const agencyId = document.querySelector("#agencyId");
const addAgencyForm = document.querySelector("#addAgencyForm");

agencyId.addEventListener("change", (event) => {
  if (event.target && event.target.id == "agencyId") {
    addAgencyForm.classList.toggle("d-none");
  }
});

.box {
  height: 100px;
  width: 100px;
  background-color: red;
}

.d-none {
  display: none;
}

samehanwar · Answer

I guess you don't need extra styles to hide and show, because this is the purpose of toggle function, so I suggest you only keep the main style which is "box"

const agencyId = document.querySelector("#agencyId");
const addAgencyForm = document.querySelector("#addAgencyForm");

agencyId.addEventListener("change", (event) => {
  if (event.target && event.target.id == "agencyId") {
    addAgencyForm.classList.toggle("box");
  }
});

.box {
  height: 100px;
  width: 100px;
  background-color: red;
}

ths · Answer

A quick way to achieve your goal here is to base your test that toggles the red square on a new data-* that we add to the option with the Create Agency text.

Let's say we have added data-reveal-red-square="1" to the Create Agency option: .

Now when the select#agencyId dropdown changes we can base our test on the new data-reveal-red-square that we have added and if it exists on the currently selected option then we can reveal the red square or otherwise we hide it.

const agencyDropdown = document.getElementById('agencyId'),
  redSquare = document.getElementById('red-square');

/**
 * listen for changes on the dropdown. 
 * If a change happens and the selcted option becomes "Create Agency" which has "data-reveal-red-square" then we reveal the "red square"
 * Otherwise, we hide it once again.
 */
agencyDropdown.addEventListener('change', e => {
  const currentlySelectedOption = agencyDropdown.options[agencyDropdown.selectedIndex];
  redSquare.classList[currentlySelectedOption.dataset.revealRedSquare ? 'remove' : 'add']('hidden');
});

/** just for demo purpose */

#red-square {
  height: 150px;
  width: 150px;
  margin: auto;
  background-color: #f00;
}

Note that the above example is one way to achieve your goal that only aims to get you started and definitely not the only way around. There must be other possible solutions that might be based on IDs, classes or other possibilities.

How to set up a change event with a nested toggle event?

3 Answers