CODEWITHSUNDEEP
javascripthtml
Oni Barolli
Oni Barolli

Reputation: 93

Why is "keypress" in my JavaScript behaving like a "keypress" and "keyup" simultaneously after clicking the HTML button?

So I'm trying to make a basic "random color generator" using html, css, and JS, all things I'm really new to. I want to allow the user to either click a button to generate a random color or press the space key, while anywhere on the page, to generate a random color. Pressing space key works perfectly fine at first, as long as the button hasn't been clicked yet, but after the buttons clicked, when the user tries to press space again, space key acts like a keypress and a keyup at the same time??? Meaning a color is generated on the press and then a completely different color is generated when the key's released. This is my JS code:

const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const hexBtn = document.querySelector(".hexBtn");
const bodyBcg = document.querySelector("body");
const hex = document.querySelector(".hex");

bodyBcg.addEventListener('keypress', getHex);

hexBtn.addEventListener('click', getHexClick);


function getHex(e) {
  if (e.key !== ' ')
    return;

  colorGenerator();
}

function getHexClick() {
  colorGenerator();
}

function colorGenerator() {
  let hexColor = "#";

  for (let i = 0; i <= 5; i++) {
    let random = Math.floor(Math.random() * hexNumbers.length);
    hexColor += hexNumbers[random];
  }

  bodyBcg.style.backgroundColor = hexColor;
  hex.innerHTML = hexColor;
}

P.S. I want to allow the user to fire off colors while space is pressed so just changing bodyBcg.addEventListener('keypress', getHex); to bodyBcg.addEventListener('keyup', getHex); isn't what I'm looking for. Any help is appreciated.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Color Generator</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div class="container">
      <h2 class="hexColor">
        this hex color code is : <span class="hex"></span>
      </h2>
      <button type="button" class="hexBtn">Press here to change color</button>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

Upvotes: 2

Views: 145

Answers (3)

Balbir Singh
Balbir Singh

Reputation: 33

This is not a js issue. This is the default behavior of the HTML button once you click the button it remains focused. So whenever you press the space bar it click the button too.

You can simply add an attribute to your button tag : onclick="this.blur();"

<button type="button" onclick="this.blur();" class="hexBtn">Press here to change color</button>

Upvotes: 1

Teemu
Teemu

Reputation: 23406

When you click on the button element, the button gets the focus. The default action of the space key is to "click" focused element to trigger its action, like a click listener attached to the button.

You can fix your code by blurring the button programmatically when hitting the space.

function getHex(e) {
  if (e.key !== ' ')
    return;
  hexBtn.blur();
  colorGenerator();
}

Upvotes: 2

Maddy89
Maddy89

Reputation: 177

Change your getHex method to following(I have used jQuery) and try,

function getHex(e) {
  if (e.key !== ' ' || $(e.target).text() == 'Click')
    return;

  colorGenerator();
}

https://jsfiddle.net/ct6rd1s8/16/

Upvotes: 0

Related Questions