Question

抱歉我的帖子含糊不清。我被困在一个在线编码挑战中，目标是必须可以使用键盘，使用向上和向下键来增加或减少一个数字。（所有 HTML 内容必须使用 JS 创建）

它要我在没有元素对象的情况下使用 addEventListener - 使用事件类型 keydown。无论使用按钮还是上下键，如果disabled-元素中的值为'1'，则减少按钮必须为'div'，并且不能有数字div 元素中小于“1”。

到目前为止，这是我的代码 - 我不确定如何合并上述功能：

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

您想使用 keyDown 事件的 keyCode 属性来确定按下的键并相应地调用 increase() 或 decrease()。 keyCode 存储一个数字，指示引起事件调用的键。互联网上有许多网站可以确定您想要的密钥代码，例如 this。

您可能还想再次使用 keyUp 来确定密钥发布，因为您可能会多次收到这些事件并且只想对其中一个做出反应。

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

您的扩展示例可能如下所示：

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

})

使用键盘操作整数

1 个答案: