javascript - 更改类名称的函数存在问题

Question

因此，如果单击按钮，我有一个函数可以将类名更改为另一个类名，然后我有其他函数可以获取更改后的类名并接收更改了类的元素，但我得到的是未定义而不是元素寻找，但我不知道为什么。此外，我想问你们是否有可能在本地存储中添加 key 高于我得到的最高 key 的项目，想象一下我有一个项目有(1，“John”)，而我的下一个项目有 key 2 ?网页:

<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 工作没有错误。

请提供有关您遇到的实际错误的更具体的详细信息。

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>