Issue: not able to change style to an event "click" in JavaScript

Question

1)

• My goal is to change the style of a sound button after pushing a key ("a" in that case).
• After pushing "a" key, no style changement is made although I have built a CSS style linked to the event (by the class selector .button1) and there is sound. The function click() is working properly after pushing "a" (because: sound) but the style is not changing.
• No error message.

2)

• I have tried several things: .button1:active; .button:hover; put style within the JavaScript lines; creating a class for each event by adding classList.add('MyClass'); change the CSS selector (. or #).

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

.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;
}

Thanks. PS: I do not use libraries/frameworks.

Answer 1

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

Make sure .button1:active 👉.button1+active

This will prevent the button from highlighting on right-click since ":" responds whenever the element is 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;
}

From the mousedown event the buttons property can be captured and whenever it's not a left click (i.e. not equal to 1) we return.

---

If the background on the other hand is not "rgb(76, 175, 80)" which is the rgb for "#4CAF50" then we add the color else we set the color to "".

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

Answer 2

Of course, there are any number of ways to implement this functionality in JS. Here is one that manually assigns a class when the a key is pressed. Note: this also results in the button having the :active pseudo-class when the function executes.

Update

Here's a bit more modular starting point you may want to try. Unfortunately, in vanilla JS, you can only assign one event listener at a time (unlike in jQuery, for example). That means we need two separate listeners: one for keydown and another for keyup. In my very simple example below, I'm commandeering your logKey function to just return whether or not the event.keyCode is equal to the key we're interested in (i.e., a | 65). When logKey() returns a true value, we toggle the button's active class. It gets toggled on when the keydown event fires and toggled off when the keyup event fires.

I'm sure this isn't the most eloquent solution, but perhaps it will get you started down a useful path.

👍

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

Moreover, is there a possibility to change the style directly within my function "logKey"?

Hmm. Directly with JavaScript? Sure. But I'd offload that responsibility to CSS. If you just mean apply a class within that function... possibly. Or, it could be that I'm misunderstanding you. The programmatic click() inside the logKey function just, well, programmatically clicks the button. But there still needs to be an function that executes on click.

Here's another option that may be more to your taste.

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>