document.getElementById ('xs'). clicked == true не работает

Question

Итак, у меня есть этот код, чтобы проверить, была ли нажата кнопка на странице и если кнопка нажата, измените цвет кнопки на «нажал», а все остальные на нормальные, но каким-то образом это условие не получает истинное значение!

function SizeButtonStyle() {
  if(document.getElementById('xs').clicked == true){
    document.getElementById('xs').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('xs').style.backgroundColor = "white";
    document.getElementById('s').style.backgroundColor = "white";
    document.getElementById('s').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('m').style.backgroundColor = "white";
    document.getElementById('m').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('l').style.backgroundColor = "white";
    document.getElementById('l').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('xl').style.backgroundColor = "white";
    document.getElementById('xl').style.backgroundColor = "rgb(0, 35, 102)";
  }
}

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

Answer 1

В функцию можно передать ключевое слово this и обратиться к нему внутри функции для проверки атрибута id. Вы также, вероятно, хотите изменить color и backgroundColor элементов:

function SizeButtonStyle(el) {
  if(el.id == 'xs'){
    el.style.color = "rgb(0, 35, 102)";
    el.style.backgroundColor = "white";
    document.getElementById('s').style.color = "white";
    document.getElementById('s').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('m').style.color = "white";
    document.getElementById('m').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('l').style.color = "white";
    document.getElementById('l').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('xl').style.color = "white";
    document.getElementById('xl').style.backgroundColor = "rgb(0, 35, 102)";
   }
}

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

Answer 2

Нет кликаемого свойства. Таким образом, вам нужно будет прослушать прослушиватель события click и посмотреть, какой элемент был нажат.

function SizeButtonStyle (button) {

  // remove the class of the previous selected element
  var selected = document.querySelector('.size_button.selected')
  if (selected) {
    selected.classList.remove('selected')
  }
  button.classList.add('selected')
  return false
}

.size_button {
  display: inline-block;
  background: #000;
  border-radius: .2em;
  font-family: "arial-black";
  font-size: 1em;
  min-width: 2em;
  color: #FFF;
  padding: .5em;
  cursor: pointer;
  text-align: center;
}

.size_button.selected {
  background-color: #16a975;
  color: #fbca01;
}

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

Как бы я это сделал со списком переключателей. JavaScript не требуется, и его просто обновить и поддерживать.

[name="size"] {
  display: none;
}

[name="size"] + label {
  display: inline-block;
  background: #000;
  border-radius: .2em;
  font-family: "arial-black";
  font-size: 1em;
  min-width: 2em;
  color: #FFF;
  padding: .5em;
  cursor: pointer;
  text-align: center;
}

[name="size"]:checked + label {
  background-color: #16a975;
  color: #fbca01;
}

<input type="radio" id="xs" value="xs" name="size" /><label for="xs">XS</label>
<input type="radio" id="s" value="s" name="size" /><label for="s">S</label>
<input type="radio" id="m" value="m" name="size" /><label for="m">M</label>
<input type="radio" id="l" value="l" name="size" /><label for="l">L</label>
<input type="radio" id="xl" value="xl" name="size" /><label for="xl">XL</label>

Answer 3

Попробуйте с этим, используя класс в Jquery

$(document).ready(function(){				
  $(".size_button").click(function(){
   $( ":button" ).css('backgroundColor','rgb(0, 35, 102)')
   $(this).css('backgroundColor','')
 })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="xs" class="size_button"><b>XS</b></button>
<button id="s" class="size_button"><b>S</b></button>
<button id="m" class="size_button"><b>M</b></button>
<button id="l" class="size_button"><b>L</b></button>
<button id="xl" class="size_button"><b>XL</b></button>

с использованием элемента кнопки в Jquery

 

$(document).ready(function(){
   $("button").on("click",function(){					
       $( ":button" ).css('backgroundColor','rgb(0, 35, 102)')
       $(this).css('backgroundColor','')
    });				
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="xs" class="size_button"><b>XS</b></button>
<button id="s" class="size_button"><b>S</b></button>
<button id="m" class="size_button"><b>M</b></button>
<button id="l" class="size_button"><b>L</b></button>
<button id="xl" class="size_button"><b>XL</b></button>

Answer 4

Надеюсь, это решение вам подходит. Я добавил прослушиватель событий, который переключает класс, где вы можете управлять стилем:

let buttons = Array.from(document.getElementsByClassName("size_button"));

buttons.forEach( (button) => {
  button.addEventListener("click", function(){
    this.classList.contains("buttonToggled") ?
      this.classList.remove("buttonToggled") :
      this.classList.add("buttonToggled");
  });
})

.buttonToggled {
  background-color: red;
}

        <button class="size_button"><b>XS</b></button>
        <button class="size_button"><b>S</b></button>
        <button class="size_button"><b>M</b></button>
        <button class="size_button"><b>L</b></button>
        <button class="size_button"><b>XL</b></button>

С уважением!