JS Изменение статуса select?

Question

Подскажите, почему когда у селектов выбраны options функция не заменяет значение статусов ? И как это поправить ? statusProducts и statusPromotionalMethod все равно возвращаются с false

let btn = document.querySelector(".js-btn");
let statusProducts = false;
let statusPromotionalMethod = false;
let selectProducts = document.querySelector(".js-products");
let selectPromotionalMethod = document.querySelector(".js-promotional-method");


btn.addEventListener("click", function() {
  validationSelect(selectProducts, statusProducts);
  validationSelect(selectPromotionalMethod, statusPromotionalMethod);


  console.log("statusProducts = ", statusProducts);
  console.log("statusPromotionalMethod = ", statusPromotionalMethod);
})


function validationSelect(selectName, selectStatus) {
  console.log("selectName.options.selectedIndex = " + selectName.options.selectedIndex);



  if (selectName.options.selectedIndex === -1) {
    console.log("Nothing check");
  } else {
    selectStatus = true;
    return selectStatus; ////  Почему статус не меняеется ?
  }

}

<select id="select-1" class="field_select js-products" name="products" multiple>
  <option value="Applications">Applications</option>
  <option value="Parental controls">Parental controls</option>
  <option value="VPN">VPN</option>
  <option value="All">All</option>
</select>


<select id="select-2" class="field_select js-promotional-method" name="promotional-method" multiple>
  <option value="Email">Email</option>
  <option value="Native ads">Native ads</option>
</select>

<button class="js-btn" type="button">btn</button>

Answer 1

Потому что во время выполнения selectStatus = true; JS пытается отыскать ближайшую переменную с названием selectStatus и находит её в параметрах функции. Значение этого параметра и меняется. А наличие одноименной глобальной переменной ни на что не влияет.

В JS нет возможности изменять значения переменных по ссылке. Используйте объекты:

let btn = document.querySelector(".js-btn");

let products = {
  status: false,
  select: document.querySelector(".js-products"),
};

let promotionalMethod = {
  status: false,
  select: document.querySelector(".js-promotional-method"),
};

/***/
btn.addEventListener("click", function() {
  console.clear();
  validationSelect(products);
  validationSelect(promotionalMethod);

  console.log("statusProducts = ", products.status);
  console.log("statusPromotionalMethod = ", promotionalMethod.status);
})


function validationSelect(obj) {
  console.log("selectName.options.selectedIndex = " + obj.select.options.selectedIndex);

  if (obj.select.options.selectedIndex === -1) {
    console.log("Nothing check");
  } else {
    return obj.status = true;
  }
  
}

<select id="select-1" class="field_select js-products" name="products" multiple>
  <option value="Applications">Applications</option>
  <option value="Parental controls">Parental controls</option>
  <option value="VPN">VPN</option>
  <option value="All">All</option>
</select>


<select id="select-2" class="field_select js-promotional-method" name="promotional-method" multiple>
  <option value="Email">Email</option>
  <option value="Native ads">Native ads</option>
</select>

<button class="js-btn" type="button">btn</button>

БЛОГ НА HUSL

JS Изменение статуса select?

Ответы (1 шт):