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

Question

我正在尝试制作 Rock,Paper,Scissors 游戏，但我想在玩家选择（例如 Rock）并且他赢了 Input(Rock) 背景颜色更改时进行制作，但我很难做到，因为我是还在学习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>

js：

function win(userChoice, pcChoice){
    userScore++;
    if(userScore > 5 ){
    userScore = 0;
    pcScore = 0;
    alert("You WIN !");
    location.reload()
    }
    userScore_span.innerHTML = userScore;
    pcScore_span.innerHTML = pcScore;
    const player = "Player".fontsize(4).fontcolor("#dc3545").sup();
    const PC = "PC".fontsize(4).fontcolor("#dc3545").sup();
    const win = "Win!".fontcolor("#28a745")
    result_div.innerHTML = userChoice + player + " Beats "+ pcChoice + PC +" "+ " You "+ win;
}

这是 GitHub： https : //github.com/AppleGamer77/rockpaperscissors

Answer 1

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

第 1 步：更新 CSS

为 3 个结果（获胜者、松散者、平局）定义这 3 个 CSS 类：

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

.winner {
    background-color: #b6eac8;
}

.looser {
    background-color: #fa6000;
}

.draw {
    background-color: #ddbbaa;
}

---

第 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";
    }
    
}

---

---

输出：

1.赢：

---

2. 松：

---

3. 抽奖：

---

更多信息： https : //www.w3schools.com/JSREF/prop_html_classname.asp