Проблема с функцией, которая меняет имена классов

Question

Итак, у меня есть эта функция, которая меняет имя класса на другое, если нажата кнопка, а затем у меня есть другая функция, которая получает имя этого измененного класса и получает этот элемент с измененным классом, но я получаю неопределенный вместо элемента im ищу и не знаю почему. Кроме того, я хочу спросить вас, ребята, возможно ли добавить в локальное хранилище элементы с ключом, превосходящим самый высокий, который я получил, представьте, что у меня есть один элемент с (1, «Джон»), а следующий - с ключом. 2? Html:

<button id="xs" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>XS</b></button>
<button id="s" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>S</b></button>
<button id="m" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>M</b></button>
<button id="l" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>L</b></button>
<button id="xl" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>XL</b></button>

Javascript:

function SizeButtonStyle(el) {
  var size = el;

  if (el.id == "xs") {
    document.getElementById("xs").className = "clicked_size_button";
    document.getElementById("s").className = "unclicked_size_button";
    document.getElementById("m").className = "unclicked_size_button";
    document.getElementById("l").className = "unclicked_size_button";
    document.getElementById("xl").className = "unclicked_size_button";
  }
  if (el.id == "s") {
    document.getElementById("xs").className = "unclicked_size_button";
    document.getElementById("s").className = "clicked_size_button";
    document.getElementById("m").className = "unclicked_size_button";
    document.getElementById("l").className = "unclicked_size_button";
    document.getElementById("xl").className = "unclicked_size_button";
  }
  if (el.id == "m") {
    document.getElementById("xs").className = "unclicked_size_button";
    document.getElementById("s").className = "unclicked_size_button";
    document.getElementById("m").className = "clicked_size_button";
    document.getElementById("l").className = "unclicked_size_button";
    document.getElementById("xl").className = "unclicked_size_button";
  }
  if (el.id == "l") {
    document.getElementById("xs").className = "unclicked_size_button";
    document.getElementById("s").className = "unclicked_size_button";
    document.getElementById("m").className = "unclicked_size_button";
    document.getElementById("l").className = "clicked_size_button";
    document.getElementById("xl").className = "unclicked_size_button";
  }
  if (el.id == "xl") {
    document.getElementById("xs").className = "unclicked_size_button";
    document.getElementById("s").className = "unclicked_size_button";
    document.getElementById("m").className = "unclicked_size_button";
    document.getElementById("l").className = "unclicked_size_button";
    document.getElementById("xl").className = "clicked_size_button";
  }
}

function addToCartClicked(event) {
  var product = document.getElementsByClassName("product_name")[0].innerText;
  var price = document.getElementsByClassName("price")[0].innerText;
  var info = [product, "XS", price];
  console.log(info);
  localStorage.setItem("names", JSON.stringify(info));
}

Answer 1

В коде изменения класса кнопки нет ничего неправильного, неизмененное JavaScript ниже работает без ошибок.

Пожалуйста, включите более подробные c подробные сведения о фактической ошибке, с которой вы столкнулись.

function SizeButtonStyle(el) {

  var size = el

  if (el.id == 'xs') {
    document.getElementById('xs').className = "clicked_size_button";
    document.getElementById('s').className = "unclicked_size_button";
    document.getElementById('m').className = "unclicked_size_button";
    document.getElementById('l').className = "unclicked_size_button";
    document.getElementById('xl').className = "unclicked_size_button";


  }
  if (el.id == 's') {
    document.getElementById('xs').className = "unclicked_size_button";
    document.getElementById('s').className = "clicked_size_button";
    document.getElementById('m').className = "unclicked_size_button";
    document.getElementById('l').className = "unclicked_size_button";
    document.getElementById('xl').className = "unclicked_size_button";
  }
  if (el.id == 'm') {
    document.getElementById('xs').className = "unclicked_size_button";
    document.getElementById('s').className = "unclicked_size_button";
    document.getElementById('m').className = "clicked_size_button";
    document.getElementById('l').className = "unclicked_size_button";
    document.getElementById('xl').className = "unclicked_size_button";
  }
  if (el.id == 'l') {
    document.getElementById('xs').className = "unclicked_size_button";
    document.getElementById('s').className = "unclicked_size_button";
    document.getElementById('m').className = "unclicked_size_button";
    document.getElementById('l').className = "clicked_size_button";
    document.getElementById('xl').className = "unclicked_size_button";
  }
  if (el.id == 'xl') {
    document.getElementById('xs').className = "unclicked_size_button";
    document.getElementById('s').className = "unclicked_size_button";
    document.getElementById('m').className = "unclicked_size_button";
    document.getElementById('l').className = "unclicked_size_button";
    document.getElementById('xl').className = "clicked_size_button";
  }
}

.unclicked_size_button {
  padding: 0.5rem;
}

.clicked_size_button {
  padding: 0.5rem 2rem;
}

<button id="xs" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XS</b></button>
<button id="s" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>S</b></button>
<button id="m" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>M</b></button>
<button id="l" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>L</b></button>
<button id="xl" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XL</b></button>