Manipulating integers using a keyboard

Question

Sorry for the vague post. I'm stuck on an online coding challenge, where the objective is that it must be possible to increase and or decrease a number using a keyboard, using the up and down keys. (all HTML-content must be created using JS)

It wants me to use addEventListener without an element object - use the event type keydown. Regardless if the buttons or the up and down keys are used, the decrease button must be 'disabled' if the values in the div-element is '1', and there can't be a number less than '1' in the div element.

Here is my code so far - I'm not sure how to incorporate the functions described above:

addEventListener('load', function() {
  let button = document.createElement('input')
  let secondButton = document.createElement('input')

  button.setAttribute('type', 'button')

  button.setAttribute('id', 'increase')

  secondButton.setAttribute('type', 'button')

  secondButton.setAttribute('id', 'decrease')

  document.body.appendChild(button)
  document.body.appendChild(secondButton)

  let div = document.createElement('div')
  div.setAttribute('id', 'bet-size')
  div.textContent = '1'
  document.body.appendChild(div)

  if (Number(div.textContent) === 1) {
    secondButton.setAttribute('disabled', '')
  }

  const increase = function() {
    div.textContent = Number(div.textContent) + 1
    if (Number(div.textContent) > 1) {
      secondButton.disabled = false
    }
  }

  const decrease = function() {
    if (Number(div.textContent) === 2) {
      secondButton.disabled = true
    }
    if (Number(div.textContent) > 1) {
      div.textContent = Number(div.textContent) - 1
    }
  }

  button.addEventListener('click', increase)

  secondButton.addEventListener('click', decrease)
})

Answer 1

You want to use keyDown event's keyCode property to determine the pressed key and call increase() or decrease() accordingly. keyCode stores a number indicating the key that caused the event evocation. There are a number of sites on the internet to determine your desired key code, like this for example.

You also might want to use keyUp to determine key releases again because you might get these events multiple times and only want to react to one of them.

let isKeyDown = false;
const handleKeyDown = function(event) {
    if(isKeyDown == false)
    {
        isKeyDown = true;
        if(event.keyCode == 38) // Arrow Up
        {
            event.preventDefault(); // Prevent page scrolling
            increase();
        }
        else if(event.keyCode == 40) // Arrow Down
        {
            event.preventDefault(); // Prevent page scrolling
            decrease();
        }
    }
}

const handleKeyUp = function(event) {
  if(isKeyDown == true)
  {
    isKeyDown = false;
  }
}

document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);

Your expanded example might look like this, then:

addEventListener('load', function() {
let button = document.createElement('input')
let secondButton = document.createElement('input')

button.setAttribute('type', 'button')

button.setAttribute('id', 'increase')

secondButton.setAttribute('type', 'button')

secondButton.setAttribute('id', 'decrease')

document.body.appendChild(button)
document.body.appendChild(secondButton)

let div = document.createElement('div')
div.setAttribute('id', 'bet-size')
div.textContent = '1'
document.body.appendChild(div)

if (Number(div.textContent) === 1 ) {
    secondButton.setAttribute('disabled', '')
} 

const increase = function() {
    div.textContent = Number(div.textContent) + 1
    if (Number(div.textContent) > 1) {
        secondButton.disabled = false
    }
}

const decrease = function() {
    if (Number(div.textContent) === 2) {
        secondButton.disabled = true
    }
    if (Number(div.textContent) > 1) {
        div.textContent = Number(div.textContent) - 1
    } 
}

// Required to remember if a key is already pressed or not
let isKeyDown = false;

//Event handlers for KeyUp And KeyDown
const handleKeyDown = function(event) {
  if(isKeyDown == false)
  {
    isKeyDown = true;
    if(event.keyCode == 38) // Up
    {
      event.preventDefault(); // Prevent page scrolling
      increase();
    }
    else if(event.keyCode == 40) // Down
    {
      event.preventDefault(); // Prevent page scrolling
      decrease();
    }
  }
}

const handleKeyUp = function(event) {
  if(isKeyDown == true)
  {
    isKeyDown = false;
  }
}

button.addEventListener('click', increase) 
secondButton.addEventListener('click', decrease)

//Add the new event handlers to the document's keydown and keyup events
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);

})