Increment and decrement button with 'keydown' (ArrowUp and Down)-CodePudding

I need some help with a school assignment. I have two buttons, one for increment and one for decrement. I have four functions, where two of them is for clicking and two for pressing arrow keys. Clicking works fine, but to use arrowUp and ArrowDown i need to click and select the button with the mouse once for it to work. Can i add something to my two lower arrow key functions so that i dont need to click them once before i can start using arrow keys?

let element = document.querySelector('#value')
let buttonIncrease = document.querySelector('#increase')
element.textContent = '1'
let buttonDecrease = document.querySelector('#decrease')
buttonDecrease.disabled = true;

//Increment number by 1 on click
buttonIncrease.addEventListener('click', () => {
  element.textContent = Number(element.textContent)   1
  if (element.textContent > 1) {
    buttonDecrease.disabled = false;
  }
})

//Decrement number by 1 on click
buttonDecrease.addEventListener('click', () => {
  element.textContent = Number(element.textContent) - 1
  if (element.textContent < 2) {
    buttonDecrease.disabled = true;
  }
})

//Increment number by 1 on keydown
buttonIncrease.addEventListener('keydown', (up) => {
  if (up.key === 'ArrowUp' ) {
    element.textContent = Number(element.textContent)   1
  }
  if (element.textContent > 1) {
    buttonDecrease.disabled = false;
  }
})

//Decrement number by 1 on keydown
buttonDecrease.addEventListener('keydown', (down) => {
  document.getElementById('decrease')
  if (down.key === 'ArrowDown') {
    element.textContent = Number(element.textContent) - 1
  }
  if (element.textContent < 2) {
    buttonDecrease.disabled = true;
  }
})

CodePudding user response：

you dont need to define muse click on increment and decrement buttons

but to use arrowUp and ArrowDown i need to click and select the button with the mouse once for it to work.

you can detect whene arrowUp and arrowDown clicked by add event lisner directly to keyboard:

addEventListener("keydown", function (e) { // Do something }

CodePudding user response：

To do what you require you can attach the keydown event handler to the window, so that no matter what element in the DOM has focus, so long as the event can bubble to the window element, the value will be changed.

Also note that you can combine the keydown event handlers in to one, and you can also make the code more succinct and DRY by extracting the repeated logic in to functions:

let buttonIncrease = document.querySelector('#increase');
let buttonDecrease = document.querySelector('#decrease');
let element = document.querySelector('#value');

buttonDecrease.disabled = true;
element.textContent = '1';

const setButtonState = () => buttonDecrease.disabled = parseInt(element.textContent, 10) <= 1;
const updateValue = increment => {
  value.textContent = Math.max(1, Number(element.textContent)   increment);
  setButtonState();
}

buttonIncrease.addEventListener('click', () => updateValue(1))
buttonDecrease.addEventListener('click', () => updateValue(-1))

window.document.addEventListener('keydown', e => {
  e.preventDefault();
  let value = Number(element.textContent);
  let increment = e.key === 'ArrowUp' ? 1 : e.key === 'ArrowDown' ? -1 : 0;
  updateValue(increment);
})

#value {
  padding: 3px;
}

<button id="decrease">-</button>
<span id="value">1</span>
<button id="increase"> </button>