Javascript 如何设置按钮元素，以便使用箭头键控制它们？

我正在制作一个手动图像库/幻灯片，按下指针将带您进入下一个/上一个图像。我已经使用“Button”元素创建了指针。现在，我只希望用户也能够使用左/右箭头键

为了使“button”元素工作，我使用javascript

<button class="left" onclick="plusDivs(-1)">&#10094;</button>
<button class="right" onclick="plusDivs(+1)">&#10095;</button>


<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = x.length
    }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}
</script>

❮；
❯
var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{
slideIndex=1
}
if（n<1）{
slideIndex=x.length
}
对于（i=0；i

---

我不知道从哪里开始，因为我从来没有使用过javascript，到目前为止也没有找到多少有用的信息。希望有人能把我推向正确的方向。

您需要在Windows对象中添加一个事件侦听器，这在internet浏览器中是通用的。“单击”等浏览器事件会从受影响的元素一直冒泡到窗口

据我所知，击键是直接应用于窗口的。您需要添加一个侦听器并侦听相应的键文本。我使用键文本而不是键代码，因为我发现它更具语义。使用console.log（e）探索keydown事件。谷歌搜索兼容性用例，这取决于您需要支持的浏览器

window.addEventListener("keydown", (e) => {
   if (e.key === "ArrowLeft"){
      plusDivs(-1);
   } else if (e.key === "ArrowRight"){
      plusDivs(1);
   }
}

看起来您正在使用嵌入在html中的内联函数调用。由于标准侦听器绑定是通过脚本而不是内联html完成的，因此您需要将上述侦听器放置在一个DOMContnloaded侦听器中。。。。这通常会将所有javascript代码包装在脚本中并执行。。。而不是手动执行您的函数

document.addEventListener('DOMContentLoaded', function() {
    ...above code goes here...
    ...including all your existing code...
});

---

另外，你不需要做+1。。。只有1，因为它已经是一个正整数。

非常感谢！我只是想确定这是否是我添加为外部文件/文档的内容？如果是，它如何“连接”到html文档？我不知道它的格式，我也没有在上面找到太多东西。它是javascript，在你的问题的脚本标签中。