如何在JavaScript中分配箭头和输入键盘键？

我需要你的帮助，以能够完成我的计数计数器程序写在hTML和JavaScript。请帮助我了解分配上下箭头和输入键盘键以增加、减少和重置计数计数器的最简单方法是什么？提前谢谢你的帮助

我用HTML和JavaScript编写了这段代码，其中的按钮可以正常工作，但我不能添加上面提到的键盘键

let add=document.getElementById（“增量”）；
let remove=document.getElementById（“减量”）；
让reset=document.getElementById（“reset”）；
让int=document.getElementById（“编号”）；
设整数=0；
add.addEventListener（'click'，function（）{
整数+=1；
int.innerHTML=integer
})
remove.addEventListener（'click'，function（）{
整数-=1；
int.innerHTML=integer
})
reset.addEventListener（'click'，function（）{
整数=0；
int.innerHTML=integer
})

@charset“utf-8”；
#容器{
宽度：246px；
高度：187px；
背景色：#F7CF5B；
垫面：4px；
左侧填充：25px；
边界半径：20px；
边框：4px实心#09AA20；
边缘顶部：20px；
左边距：10px；
}
#数{
背景色：#19A709；
宽度：77%；
边界半径：10px；
边框：3px实心#FF2600；
垫面：5px；
左侧填充：10px；
字体大小：60px；
文本对齐：左对齐；
颜色：#FFFFFF；
左边距：8px；
}
#头衔{
颜色：#FF0000；
字体大小：33px；
字体风格：普通；
字体大小：粗体；
左边距：8px；
垫底：10px；
}
#增量{
宽度：60px；
高度：30px；
垫面：1px；
右侧填充：1px；
垫底：1px；
左侧填充：1px；
利润上限：11px；
左边距：9px；
字号：19px；
颜色：#FFFFFF；
背景色：#09AA20；
文本对齐：居中；
}
#减量{
宽度：60px；
高度：30px；
垫面：1px；
右侧填充：1px；
垫底：1px；
左侧填充：1px；
利润上限：11px；
左边距：9px；
字号：19px；
颜色：#FFFFFF；
背景色：#0226F9；
}
#重置{
宽度：60px；
高度：30px；
垫面：1px；
右侧填充：1px；
垫底：1px；
左侧填充：1px；
利润上限：11px；
左边距：9px；
字号：19px；
颜色：#FFFFFF；
背景色：#252525；
}

计数计数器1.0
身体{
背景色：#7B1A1A；
}
理货台
0
+1
-1
重置

在文档上添加一个eventListener，并侦听

按键下的事件。在
keydown
上检查
事件。key
条目，如果设置为所需的key，则运行所需的code；加、减或重置您的值。切换条件也可能更适合此应用程序


let add=document.getElementById（“增量”）；
let remove=document.getElementById（“减量”）；
让reset=document.getElementById（“reset”）；
让int=document.getElementById（“编号”）；
设整数=0；
document.addEventListener（'keydown'，（e）=>{
如果（e.key==“ArrowUp”）{
整数++；
}否则如果（e.key==“箭头向下”）{
整数--；
}否则，如果（e.key==“输入”）{
整数=0；
}
int.textContent=整数；
});
add.addEventListener（'click'，function（）{
整数+=1；
int.innerHTML=integer
})
remove.addEventListener（'click'，function（）{
整数-=1；
int.innerHTML=integer
})
reset.addEventListener（'click'，function（）{
整数=0；
int.innerHTML=integer
})
@charset“utf-8”；
#容器{
宽度：246px；
高度：187px；
背景色：#F7CF5B；
垫面：4px；
左侧填充：25px；
边界半径：20px；
边框：4px实心#09AA20；
边缘顶部：20px；
左边距：10px；
}
#数{
背景色：#19A709；
宽度：77%；
边界半径：10px；
边框：3px实心#FF2600；
垫面：5px；
左侧填充：10px；
字体大小：60px；
文本对齐：左对齐；
颜色：#FFFFFF；
左边距：8px；
}
#头衔{
颜色：#FF0000；
字体大小：33px；
字体风格：普通；
字体大小：粗体；
左边距：8px；
垫底：10px；
}
#增量{
宽度：60px；
高度：30px；
垫面：1px；
右侧填充：1px；
垫底：1px；
左侧填充：1px；
利润上限：11px；
左边距：9px；
字号：19px；
颜色：#FFFFFF；
背景色：#09AA20；
文本对齐：居中；
}
#减量{
宽度：60px；
高度：30px；
垫面：1px；
右侧填充：1px；
垫底：1px；
左侧填充：1px；
利润上限：11px；
左边距：9px；
字号：19px；
颜色：#FFFFFF；
背景色：#0226F9；
}
#重置{
宽度：60px；
高度：30px；
垫面：1px；
右侧填充：1px；
垫底：1px；
左侧填充：1px；
利润上限：11px；
左边距：9px；
字号：19px；
颜色：#FFFFFF；
背景色：#252525；
}

计数计数器1.0
身体{
背景色：#7B1A1A；
}
理货台
0
+1
-1
重置
提示：按向下键。非常感谢您的回答。我现在很高兴，因为代码工作正常。匈牙利的问候。（我从出生起就是一个坐在轮椅上的残疾人。我是这里的一个初学者，这是我的第一个问题，我希望我能找到方法在这里给你的答案投赞成票。）