Как изменить цвет фона кнопки по имени, используя Javascript

Question

У меня есть несколько кнопок на моей веб-странице, и я хочу стилизовать цвета фона, когда нажимаю на них в соответствии с названием кнопки. Я хочу, чтобы все "Томы" были светло-серыми, все "Дикс" - светло-зелеными, а все остальные ("Гаррис") - светло-желтыми. Я добавил следующий код на свою внешнюю страницу Javascript, но она не работает:

    function bgColor() {
      var x = document.getElementsByTagName("button").name;
      if (x == "Tom") {
      document.getElementsByTagName("button").style.backgroundColor=
      "lightgray";
      } else if (x == "Dick") { 
      document.getElementsByTagName("button").style.backgroundColor=
      "lightgreen";
      } else { 
      document.getElementsByTagName("button").style.backgroundColor=
      "lightyellow";           
      }
    }

HTML читает что-то вроде этого, но между символами меньше / больше, конечно:

    button type="button" name="Tom" onclick="bgColor()"
    button type="button" name="Dick" onclick="bgColor()"
    button type="button" name="Harry" onclick="bgColor()"

РЕДАКТИРОВАНИЕ ДОБАВИТЬ Я не могу понять, как ответить на комментарий Миккеля напрямую. Я попытался просто опубликовать другой комментарий, но он не позволил бы мне добавить код. Во всяком случае, я попробовал исправление, которое он предложил, используя следующее, но оно также не сработало для меня.

    function bgColor() {
      var tom = document.querySelector('button[name="Tom"]')
      .style.backgroundColor = 'lightgray';
      var dick = document.querySelector('button[name="Dick"]')
      .style.backgroundColor = 'lightgreen';
      var harry = document.querySelector('button[name="Harry"]')
      .style.backgroundColor = 'lightyellow';
    }

Что я делаю не так?

Answer 1

Как сказал @Mikkel, ваш селектор неверен - вы захотите использовать attribute selector, чтобы получить элементы, соответствующие вашему name атрибуту

---

Однако и в этом случае c у вас есть более странная проблема - вам придется изменить имя вашей функции - bgColor также является именем свойства элементов, которые, по моему мнению, являются причинами ваши дальнейшие проблемы. - Вы можете узнать больше об этом здесь

Если вы измените имя на что-то вроде changeColors, у вас не должно быть этой проблемы

В стороне нет нужно назначить ваш querySelectors переменной, вы можете просто запустить их в этом случае

function changeColors() {
  document.querySelector('button[name="Tom"]').style.backgroundColor = 'lightgray';
  document.querySelector('button[name="Dick"]').style.backgroundColor = 'lightgreen';
  document.querySelector('button[name="Harry"]').style.backgroundColor = 'lightyellow';
}

<button type="button" name="Tom" onclick="changeColors()"> X </button>
<button type="button" name="Dick" onclick="changeColors()"> X </button>
<button type="button" name="Harry" onclick="changeColors()"> X </button>

Answer 2

Во-первых, использование bgColor в качестве имени пользовательской функции вызовет ошибку типа , поскольку это ключевое слово зарезервировано для JS (свойство объекта), хотя и устарело.

Second -> var x = document.getElementsByTagName ("button"). Name; явно выдаст ошибку x не определено , потому что этот синтаксис без ' .name 'должен возвращать все кнопки на странице в массиве, при этом вы можете l oop просматривать и получать доступ к свойствам отдельной кнопки, например. name

Поэтому мы используем это вместо var x = document.getElementsByTagName ("button") , которое возвращает массив кнопок на странице.

* 1022 Как говорится, давайте посмотрим, как мы можем изменить ваш код для достижения того, что вы ищете:

HTML:

 <button type="button" name="Tom" onclick="buttonBgColor(event)"> Tom</button>
 <button type="button" name="Dick" onclick="buttonBgColor(event)"> DicK </button>
 <button type="button" name="Harry" onclick="buttonBgColor(event)"> Harry </button>

JS:

   function buttonBgColor(e) {
     const buttons = document.getElementsByTagName("button").name;

      for(button of buttons){

         const current_button = e.target;

          if(current_button.name == 'Tom'){
            current_button.style.backgroundColor = 'lightgray'
          }else if(current_button.name == 'Dick'){
            current_button.style.backgroundColor = 'lightgreen'
          }else if(current_button.name == 'Harry'){
            current_button.style.backgroundColor = 'lightyellow'
          }
      }
    }

Этот метод полезен, потому что при условии, что у вас есть две кнопки с одинаковым именем, скажем 'Tom' , и все же вы хотите, чтобы один из них сделал что-то дополнительное, не меняя цвета фона, вы можете сослаться на их ID , чтобы достичь этого, используя e.target.id или current_button.id в условии, чтобы подключить другой обработчик для этой конкретной 'Tom' кнопки .

Надеюсь, это поможет.

Answer 3

document.getElementsByTaName ("кнопка") получает все ваши кнопки. Что вы хотите сделать, это проверить каждую из кнопок в отдельности и применить цвет.

Вы можете сделать это с помощью приведенного ниже кода, который изменит цвет "Том". Вы можете повторить это, чтобы заставить его работать для других ваших кнопок.

function bgColor() {
  var tom = document.querySelector('button[name="Tom"]').style.backgroundColor = 'purple'
}