Как применить строку, состоящую из двух 'value' кнопок radiobutton, в качестве критерия сортировки массива? JS

Question

Есть две пары радио-кнопок. Делаю два выбора, получаю два значения, преобразовываю их в строку typeStr. Есть массив объектов collection. Я хочу получить value объекта массива, если key этого объекта совпадет со строкой typeStr. Все получается, если есть только две кнопки (один выбор). Как только я создаю строку из двух и более значений, полученных при клике на кнопки - ничего не выходит. Хотя в консоль значение typeStr, например AС выводится. Но применить его в виде критерия сортировки не получается. То есть я хочу получить "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>

Answer 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>

БЛОГ НА HUSL

Как применить строку, состоящую из двух 'value' кнопок radiobutton, в качестве критерия сортировки массива? JS

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