Проблема: не удалось изменить стиль на событие «клик» в JavaScript - PullRequest
Новая
       27

Проблема: не удалось изменить стиль на событие «клик» в JavaScript

1 голос
/ 26 апреля 2020

1)

  • Моя цель - изменить стиль звуковой кнопки после нажатия клавиши (в данном случае «a»).
  • После нажатия клавиши «a» изменение стиля не производится, хотя я создал стиль CSS, связанный с событием (селектором класса .button1), и звук есть. Функция click () работает правильно после нажатия «a» (потому что: звук), но стиль не меняется.
  • Нет сообщений об ошибках.

2)

  • Я пробовал несколько вещей: .button1: active; .button: парения; поместите стиль в линии JavaScript; создание класса для каждого события путем добавления classList.add ('MyClass'); измените селектор CSS (. или #).

3)

HTML file : 

<button onclick="play1()" id="button1" class="button button1">A</button>

<script>
document.addEventListener("keydown", logKey);

            function logKey(){
                if (event.keyCode === 65) {
                    document.getElementById("button1").click();                 
                }
            }
</script>

CSS файл : 

.button1 {
    left: 400;
    bottom: 400;
    position: fixed;
    margin: 0 auto;
    height: 120px;
    width: 120px;
    background-color: rgba(70, 96, 150, 0.6);
    text-align: center;
    font-size: 16px;
    border-style: solid; 
    border-color: black;
    border-width: 4px;
    border-radius: 20px;

}

.button1:active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}

Спасибо. PS: я не пользуюсь библиотеками / фреймворками.

Ответы [ 2 ]

1 голос
/ 26 апреля 2020 
<button onclick="play1()" id="button1" class="button button1">A</button>

Убедитесь, что .button1: active b.button1 + active

Это предотвратит подсветку кнопки при щелчке правой кнопкой мыши, поскольку ": " реагирует всякий раз, когда элемент активен. . 

.button1+active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}

Из события mousedown свойство кнопок может быть захвачено и всякий раз, когда это не левый щелчок ( т.е. не равен 1 ), мы возвращаемся.

Если фон с другой стороны не является "rgb (76, 175, 80)", который является rgb для "# 4CAF50", тогда мы добавляем цвет, иначе мы устанавливаем цвет на "". 

<script>
  document.addEventListener("mousedown", logKey);

  function logKey() {
    var elem = document.getElementById("button1")

    if ("buttons" in window.event && (window.event.target.id === "button1")) {
      if (window.event.buttons !== 1) {
        return
      } else {
        if (elem.style.backgroundColor !== "rgb(76, 175, 80)") {
          elem.style.backgroundColor = "#4CAF50";
        } else {
          elem.style.backgroundColor = "";
        }
      }
    }
  }

  function play1(){
    // console.log("elem")
  }  

</script>
1 голос
/ 26 апреля 2020

Конечно, существует множество способов реализовать эту функцию в JS. Вот тот, который вручную назначает класс при нажатии клавиши a. Примечание: это также приводит к тому, что кнопка имеет псевдокласс :active при выполнении функции.

Обновление

Вот немного более модульная отправная точка, которую вы можете попробовать. К сожалению, в vanilla JS вы можете назначать только одного прослушивателя событий за раз (в отличие, например, от jQuery). Это означает, что нам нужно два отдельных слушателя: один для keydown и другой для keyup. В моем очень простом примере, приведенном ниже, я приказываю вашей функции logKey просто возвращать, равен или нет event.keyCode ключ, который нас интересует (т. Е. a | 65). Когда logKey () возвращает истинное значение, мы переключаем активный класс кнопки. Он включается при срабатывании события keydown и выключается при срабатывании события keyup.

Я уверен, что это не самое красноречивое решение, но, возможно, оно поможет вам начать полезный путь.

? 

var button = document.querySelector('.button')
var KEY = 65;

var logKey = (event) => {
  return event.keyCode === KEY;
}

var toggleButton = function() { 
  let keyPressed = logKey(event);
  if (keyPressed) {
    button.classList.toggle('button--active');
  }
}
  
var listen = function() {
  window.addEventListener('keydown', toggleButton);
  window.addEventListener('keyup', toggleButton);
}

listen();
.button {
    left: 400;
    bottom: 400;
    position: fixed;
    margin: 0 auto;
    height: 120px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    border-style: solid; 
    border-color: black;
    border-width: 4px;
    border-radius: 20px;

}

.button--active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}
<button id="button" class="button">A</button>

ОБНОВЛЕНИЕ 2

Кроме того, есть возможность изменить стиль непосредственно в моя функция "logKey"?

Хмм. Прямо с JavaScript? Конечно. Но я бы переложил эту ответственность на CSS. Если вы просто хотите применить класс внутри этой функции ... возможно. Или, может быть, я вас неправильно понимаю. Programmati c click() внутри функции logKey просто программно нажимает кнопку. Но все еще должна быть функция, которая выполняется при щелчке .

Вот еще один вариант, который может быть на ваш вкус. 

document.addEventListener("keydown", logKey);
document.addEventListener("keyup", logKey);

var myButton = document.querySelector('#button');

function logKey(event) {
  if (event.keyCode === 65) {
    myButton.click();
  }
}

function changeItUp() {
  myButton.classList.toggle('button--active');
};
.button {
    left: 400;
    bottom: 400;
    position: fixed;
    margin: 0 auto;
    height: 120px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    border-style: solid; 
    border-color: black;
    border-width: 4px;
    border-radius: 20px;

}

.button--active,
.button:active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}
<button onclick="changeItUp()" id="button" class="button">A</button>
...