I am trying to toggle the visibility of a div element based on the values from two different select form fields.

The HTML select form fields have ids: #team and #country respectively.

I have so far tried:

let teamVal;
 document.getElementById("team").addEventListener("change", function (e) {
   teamVal= e.target.value;
 });

 let countryVal;
 document.getElementById("country").addEventListener("change", function (e) {
   countryVal = e.target.value;
 });

// a helper function that should toggle the div element with an id, #myDiv
function toggleDivVisibility(teamVal, countryVal) {
  console.log("Toggle method called!");

  const myDiv = document.getElementById("myDiv");

  if (teamVal === "firmino" && countryVal === "brazil") {
    myDiv.style.display = "none";
  } else {
    myDiv.style.display = "block";
  }
}

toggleDivVisibility(teamVal, countryVal);

Thus far, the method seems to be called on document load, however the implementation doesn't work.

Any assistance will be highly appreciated.