Javascript 如何使用箭头键移动特定的div（通过单击按钮指定）

我有两个div（#1和#2）和两个按钮。单击按钮时，应选择要移动的div，当按下箭头键时，该div应移动。另一个应该留在原地。如果单击另一个按钮，先前移动的div应保持在其新位置，并且新选择的div应随箭头键一起移动

.counter {
                border-radius:50%;
                width:20px;
                height:20px;
                position:absolute;
                transition:top linear 0.6s, left linear 0.6s;
                font-size:20px;
                font-weight:bold;
                text-align:center;
                padding:20px;
                top: 525px;
                left: 60px;
                background-color:red;
            }

---

这里有一个解决方案。我已经编辑了一些值，但是您可以很容易地将它们更改回来

const buttone=document.getElementById（'button-one'）；
const buttonTwo=document.getElementById（'button-two'）；
const elementOne=document.getElementById（'one'）；
const elementTwo=document.getElementById（'two'）；
buttonOne.addEventListener（'click'，clickOnButtonOne）；
buttonTwo.addEventListener（'click'，clickOnButtonTwo'）；
让selectedElement=null；
函数clickOnButtonOne（）{
selectedElement=elementOne；
}
功能clickOnButtonTwo（）{
selectedElement=elementTwo；
}
document.onkeydown=detectKey；
功能检测键（e）{
如果（已选择元素）{
如果（e.keyCode=='39'）{
var posLeft=selectedElement.offsetLeft
selectedElement.style.left=（posLeft+50）+“px”
}
如果（e.keyCode=='38'）{
var posTop=selectedElement.offsetTop
selectedElement.style.top=（posTop-50）+“px”
}
}
}

计数器{
边界半径：50%；
宽度：20px；
高度：20px；
位置：绝对位置；
过渡：顶部线性0.6s，左侧线性0.6s；
字体大小：20px；
字体大小：粗体；
文本对齐：居中；
填充：20px；
顶部：500px；
左：60px；
背景色：红色；
}

移动一个
第二步
1.
2

这是家庭作业吗？这是伪代码吗？无法创建以数字开头的函数。。。为什么要使两个

if

语句相同，但只是更改id？请在您的代码上添加注释或添加更多信息，因为很难理解您需要什么：）为什么不简单地将它们设置为可拖动的？我仍然需要确保一个不能移动，而另一个可以移动，因为这是一个棋盘游戏，玩家轮流玩。你知道怎么做吗？@DadiBit我有两个if语句，我试图用箭头键移动div，这取决于通过按钮选择的div。我不知道怎么做。您正在调用

getElementById（）

并传递一个空字符串。这似乎是行不通的。

<button onclick="one">Move One</button>
           <button onclick="two">Move Two</button>
           <div class="counter" id="1" >1</div>
           <div class="counter" id="2">2</div>

 var go = "1"
               function one() {
                   go = "1"
               }
               function two() {
                   go = "2"
               }

document.onkeydown = detectKey;
        function detectKey(e) {
    
        var posLeft = document.getElementById('').offsetLeft
        var posTop = document.getElementById('').offsetTop
        
            if (e.keyCode == '39') {
                if (go === "1") {
        document.getElementById('1').style.left  = (posLeft+150)+"px"
        }  
            if (e.keyCode == '38') {
        document.getElementById('1').style.top  = (posTop-150)+"px"
        }
            }
            
            if (e.keyCode == '39') {
                if (go === "2") {
        document.getElementById('2').style.left  = (posLeft+150)+"px"
        }  
            if (e.keyCode == '38') {
        document.getElementById('2').style.top  = (posTop-150)+"px"
        }
            }
    }