Javascript keydown event twice to cancel

Question

My intention is to make div when keydown, and remove div when the same key is pressed again. This is my code.

let keydown = false;

document.addEventListener('keydown', function(e) { 
  if (e.code === 'Space') {
    if (!keydown) {
      keydown = true;
      console.log("space")
      e.preventDefault(); //space doesn't manipulate position
      $("body").append($("<div id='refactor'></div>"))
      $(refactor).append($(".highlight").text())
      }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

What should I do to remove the div when Space is hit again?

Your code snippet is throwing an error when I hit space, can you fix it, please? — Jakub Kotrs, Apr 03 '22 at 22:20
as @JakubKotrs suggested, please fix your snippet as it throws an error as soon as we press the `spacebar`. Also, can you elaborate more on the condition to add/remove the `div` element. — ThS, Apr 03 '22 at 22:22
you've implemented an action to act on `keydown === false` and toggled `keydown`, so surely you'd just add a second action for when `keydown===true`? — pilchard, Apr 03 '22 at 22:25

vanowm · Answer 1 · 2022-04-03T23:57:11.827

First of all...jquery...avoid this bloatware by all means, please...

Of course this is based on what you've asked here, but I'd recommend instead of store true/false for the pressed key, store the new div element instead. This way, you'll have instant access to it without need search in the DOM.

To remove a node from the DOM, you just need execute node.removeChild(child)

let div = null;
document.addEventListener('keydown', function(e) { 
  if (e.code === 'Space') {
    console.log("space")
    e.preventDefault(); //space doesn't manipulate position

    if (div)
    {
      //remove div from DOM
      div.parentNode.removeChild(div);
      div = null;
    }
    else
    {
      //create new div
      div = document.createElement("div");
      div.id = "refactor";
      div.textContent = document.querySelector(".highlight").textContent;
      document.body.appendChild(div);
    }
  }
})

#refactor
{
  background-color: lightgreen;
}

<div class="highlight">test</div>

If your whole goal is to show/hide an element, than you should do so via CSS instead of adding/removing elements from DOM, it's significantly faster and allows add additional animations/styles:

let div = document.getElementById("refactor");
document.addEventListener('keydown', function(e) { 
  if (e.code === 'Space') {
    console.log("space")
    e.preventDefault(); //space doesn't manipulate position

    if (div.classList.contains("hidden"))
    {
      div.textContent = document.querySelector(".highlight").textContent + " " + Date();
    }

    div.classList.toggle("hidden");
  }
})

#refactor
{
  background-color: lightgreen;
  transition: height 0.5s, width 0.5s, background-color 0.5s;
  height: 1.5em;
  width: 100%;
  overflow: hidden;
}

#refactor.hidden
{
  height: 0;
  width: 0;
  background-color: pink;
}

<div class="highlight">test</div>
<div id="refactor" class="hidden"></div>
<div>blah</div>

Javascript keydown event twice to cancel

1 Answers1