0

Есть две пары радио-кнопок. Делаю два выбора, получаю два значения, преобразовываю их в строку typeStr. Есть массив объектов collection. Я хочу получить value объекта массива, если key этого объекта совпадет со строкой typeStr. Все получается, если есть только две кнопки (один выбор). Как только я создаю строку из двух и более значений, полученных при клике на кнопки - ничего не выходит. Хотя в консоль значение typeStr, например выводится. Но применить его в виде критерия сортировки не получается. То есть я хочу получить "1", если выберу две первые кнопки, или "2", если выберу две вторые кнопки. Помогите разобраться.

let collection = [
  {
    key: "AC",
    value: "1"
  },
  {
    key: "BD",
    value: "2"
  }
];
let arrValues = [];
let result1 = (function () {
  let radios1 = document.getElementsByName("Info");
  for (let a = 0; a < radios1.length; a++) {
    radios1[a].onclick = function () {
      document.getElementById("a").disabled = true;
      document.getElementById("b").disabled = true;
      arrValues.push(this.value);
    };
  }
})();
let result2 = (function () {
  let radios2 = document.getElementsByName("Energy");
  for (let i = 0; i < radios2.length; i++) {
    radios2[i].onclick = function () {
      document.getElementById("c").disabled = true;
      document.getElementById("d").disabled = true;
      arrValues.push(this.value);
      let typeStr = arrValues.join(" ");

collection
    .filter(function(values, item){
      return (item.key === typeStr)
    })
    .map(function (item) {
     return document.getElementById("result").innerHTML = item.value;
    });

    };
  }
})();
<div>
  <label>
    <input type="radio" name="Info" id="a" value="A" />
  </label> <label>
  <input type="radio" name="Info" id="b" value="B" />
  </label>
</div>
<hr>
</hr>
<div>
  <label>
    <input type="radio" name="Energy" id="c" value="C" />
  </label>
  <label>
    <input type="radio" name="Energy" id="d" value="D" />
  </label>
</div>

<div id="result"></div>

1 ответ 1

1

let collection = [{
    key: "AC",
    value: "1"
  },
  {
    key: "BD",
    value: "2"
  },
  {
    key: "AD",
    value: "3"
  },
  {
    key: "BC",
    value: "4"
  }
];
let arrValues = [];
let result1 = (function() {
  let radios1 = document.getElementsByName("Info");
  for (let a = 0; a < radios1.length; a++) {
    radios1[a].onclick = function() {
      document.getElementById("a").disabled = true;
      document.getElementById("b").disabled = true;
      arrValues.push(this.value);
    };
  }
})();
let result2 = (function() {
  let radios2 = document.getElementsByName("Energy");
  for (let i = 0; i < radios2.length; i++) {
    radios2[i].onclick = function() {
      document.getElementById("c").disabled = true;
      document.getElementById("d").disabled = true;
      arrValues.push(this.value);
      let typeStr = arrValues.join("");

      collection
        .filter(function(values, item) {
          return (values.key === typeStr)
        })
        .map(function(item) {
          return document.getElementById("result").innerHTML = item.value;
        });

    };
  }
})();
<div>
  <label>
    <input type="radio" name="Info" id="a" value="A" />
  </label> <label>
  <input type="radio" name="Info" id="b" value="B" />
  </label>
</div>

<hr />

<div>
  <label>
    <input type="radio" name="Energy" id="c" value="C" />
  </label>
  <label>
    <input type="radio" name="Energy" id="d" value="D" />
  </label>
</div>

<div id="result"></div>

3
  • Спасибо огромное!!!
    – Che
    22 мая 2020 в 15:40
  • Из-за этого пробела я уже три дня ломаю голову! ;))) я бы, наверное, сама никогда не нашла ошибку. И еще в двух местах спасибо, что исправили.
    – Che
    22 мая 2020 в 15:42
  • там ещё коллбэк для collection.filter изменён немного, item это ключ текущего элемента массива а не сам элемент поэтому item.key возвращает undefined
    – IvaMuxa
    22 мая 2020 в 18:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.