Javascript 如何更改选定的背景色输入html/js

我试图制作石头、布、剪刀游戏，但我想在玩家选择（例如石头）和他赢的时候制作，输入（石头）的背景颜色改变，但我很难做到，因为我还在学习js

html:

<div id="buttonsInput" class="m-4">
            <input type="image" width="150px" height="150px" src="photo's/r.png" name="rock" class="border border-light rounded-circle rock d-inline m-2" id="Rock">
            <input type="image" width="150px" height="150px" src="photo's/p.png" name="paper" class="border border-light rounded-circle paper d-inline m-2" id="Paper">
            <input type="image" width="150px" height="150px" src="photo's/s.png" name="scissors" class="border border-light rounded-circle scissors d-inline m-2" id="Scissors">
        </div>

这里是GitHub：

---

可通过以下两个步骤更改div的背景颜色：

步骤1：更新CSS

为3个结果定义这3个CSS类（优胜者、失败者、平局者）：

文件名：rps_style.css（向文件中添加以下新类）

---

步骤2：更新Javascript

更新Javascript函数（win、loose、draw）以将适当的css类设置为输入div

文件名：java.js

function win(userChoice, pcChoice){
    //  existing code 

    // Add the following lines the end of the function
    var myDiv = document.getElementById("buttonsInput")
    if (myDiv.className.indexOf("winner") <= 0) {
        myDiv.className = "m-4 winner";
    }
    
}

function loses(userChoice, pcChoice){

    // existing code 

    // Add the following lines the end of the function
    var myDiv = document.getElementById("buttonsInput")
    if (myDiv.className.indexOf("looser") <= 0) {
        myDiv.className = "m-4 looser";
    }
        
}

function draw(userChoice, pcChoice){

    // existing code 

    // Add the following lines the end of the function
    var myDiv = document.getElementById("buttonsInput")
    if (myDiv.className.indexOf("draw") <= 0) {
        myDiv.className = "m-4 draw";
    }
    
}

函数win（userChoice，pcChoice）{
//现行守则
//在函数末尾添加以下行
var myDiv=document.getElementById（“按钮输入”）
如果（myDiv.className.indexOf（“winner”）你能再解释一点吗。你想改变什么元素的背景。还要注释location.reaload（）很好，我喜欢这个主意，但我的意思是选择的背景色而不是实际的背景色，比如如果玩家选择了摇滚，这是一个win the rock按钮，它会自行改变背景色，但我喜欢你的想法。这个：。摇滚：焦点{背景色：rgb（68，39，39）；}
.winner {
    background-color: #b6eac8;
}

.looser {
    background-color: #fa6000;
}

.draw {
    background-color: #ddbbaa;
}

function win(userChoice, pcChoice){
    //  existing code 

    // Add the following lines the end of the function
    var myDiv = document.getElementById("buttonsInput")
    if (myDiv.className.indexOf("winner") <= 0) {
        myDiv.className = "m-4 winner";
    }
    
}

function loses(userChoice, pcChoice){

    // existing code 

    // Add the following lines the end of the function
    var myDiv = document.getElementById("buttonsInput")
    if (myDiv.className.indexOf("looser") <= 0) {
        myDiv.className = "m-4 looser";
    }
        
}

function draw(userChoice, pcChoice){

    // existing code 

    // Add the following lines the end of the function
    var myDiv = document.getElementById("buttonsInput")
    if (myDiv.className.indexOf("draw") <= 0) {
        myDiv.className = "m-4 draw";
    }
    
}