问题：无法将样式更改为JavaScript中的事件“单击”

Question

1）

• 我的目标是在按下键（在这种情况下为“ a”）后更改声音按钮的样式。
• 按下“ a”键后，尽管我建立了与事件链接的CSS样式（通过类选择器.button1），但没有声音更改，但声音正常。按下“ a”（因为：声音）后，函数click（）正常工作，但是样式没有改变。
• 没有错误信息。

2）

• 我已经尝试了几件事：.button1：active; .button：悬停;在JavaScript行中放置样式；通过添加classList.add（'MyClass'）为每个事件创建一个类；更改CSS选择器（。或＃）。

3）

HTML文件：

<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：我不使用库/框架。

Answer 1

当然，有许多方法可以在JS中实现此功能。这是一个在按下a键时手动分配类别的方法。注意：函数执行时，这还会导致按钮具有:active伪类。

更新

这里您可能想尝试一些模块化的起点。不幸的是，在普通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>

UPDATE 2

此外，是否可以直接在我的函数“ logKey”中更改样式？

嗯。直接使用JavaScript？当然。但是我会将这项责任转移给CSS。如果您只是想在该函数中应用一个类，则可能。或者，可能是我误会了你。恰好，以编程方式单击logKey函数内部的编程click()。但是仍然需要在click。

上执行的功能。

这里是另一个可能更合您口味的选择。

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>

Answer 2

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

确保.button1：active👉.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事件中，可以捕获button属性，只要不是左键单击（即，不等于1），我们就返回。

---

[如果背景不是“ rgb（76，175，80）”，它是“＃4CAF50”的rgb，则我们添加颜色，否则将颜色设置为“”。

<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>