Как я могу обновить 2 переменные из двух входов одновременно?

Question

Я не могу заставить их выводить оба выбора одновременно. Это возможно? Одна сторона всегда неопределена. Я пробовал так много вещей, но когда я console.log, я просто не могу заставить их войти в систему одновременно. Я бы хотел, чтобы значения по умолчанию были «все», и тогда любая из сторон будет обновляться в зависимости от того, что нажимается.

function combo(a, b) {
  a = a.value
  b = b.value
  console.log(a, b)
}

<label for="food">Please select a food: </label>
<select id="food" onchange="combo(this,'all')">
  <option value="100">Select</option>
  <option value="all">All</option>
  <option value="cheese">cheese</option>
  <option value="pickle" pickle</option>
</select>

<label for="sort">Please sort: </label>
<select id="sort" onchange="combo('all',this)">
  <option value="100">Select</option>
  <option value="smell">smell</option>
  <option value="texture">texture</option>
</select>

Answer 1

Еще один способ сделать это, меньше строк.

function combo() {  
  let food = document.getElementById("food");
  let sort = document.getElementById("sort");
  console.log(food.options[food.selectedIndex].text + ', ' + sort.options[sort.selectedIndex].text);  
}

<label for="food">Please select a food: </label>
<select id="food" onchange="combo()">
  <option value="100">Select</option>
  <option value="all">All</option>
  <option value="cheese">cheese</option>
  <option value="pickle"> pickle</option>
</select>

<label for="sort">Please sort: </label>
<select id="sort" onchange="combo()">
  <option value="100">Select</option>
  <option value="smell">smell</option>
  <option value="texture">texture</option>
</select>

Answer 2

Попробуйте получить значения явно, а не пытаться пройти через обработчик атрибута onchange.

const foodSelect = document.getElementById("food");
const sortSelect = document.getElementById("sort");

function selectHandler() {
  const food = foodSelect.value;
  const sort = sortSelect.value;
  console.log(`Food: ${food} | Sort: ${sort}`);
}

foodSelect.addEventListener("change", selectHandler);
sortSelect.addEventListener("change", selectHandler);

<label for="food">Please select a food: </label>
<select id="food">
  <option value="100">Select</option>
  <option value="all">All</option>
  <option value="cheese">cheese</option>
  <option value="pickle" pickle</option>
</select>

<label for="sort">Please sort: </label>
<select id="sort">
  <option value="100">Select</option>
  <option value="smell">smell</option>
  <option value="texture">texture</option>
</select>