How can I replace a CSS border in HTML using Javascript?

Question

I'm following a simple web development tutorial and would like to have an interactive border depending on the outcome of Rock, Paper, Scissors. How can I replace (or overlay) the current CSS border of the Rock, Paper, or Scissor images?

According to the tutorial the solution is as shown in the code. However, this is the result that I am getting: https://ibb.co/wBFG2cQ (Sorry, I'm not allowed to embed images directly). Here is the intended outcome: https://ibb.co/tB7HvWX . Lastly, a link to the website hosted on a free hosting site where all source code is viewable https://rockpaperscissors-ndsamu.netlify.com/ .

JavaScript Code (last 2 lines):

function win(userChoice, computerChoice) {
    userScore++;
    userScore_span.innerHTML = userScore;
    result_p.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(computerChoice)}. You win!`;
    document.getElementById('crown').style.left="-100px";
    document.getElementById('crown').style.display="block";
    document.getElementById(userChoice).classList.add('green-glow');
    setTimeout(function() { document.getElementById(userChoice).classList.remove('green-glow') }, 1000);
}

CSS Code (for each image):

.choice {
    border: 4px solid #25272E;
    border-radius: 50%;
    margin: 0 20px;
    padding: 15px;
    display: inline-block;
    transition: all 0.3s ease;
}

CSS Code (for Winning):

.green-glow {
    border: 4px solid #4DCC7D;
    border-radius: 50%;
    box-shadow: 0 0 10px #3DA364;
}

Instead, I would like the green circular border to replace or overlay the current border rather than appearing within it.

Thank you in advance!

Answer 1

Without seeing your full code, It's hard to tell what's causing that. My best guess is padding: 15px is the culprit. If it is, then Maybe try adding * { box-sizing: border-box; } * { box-sizing: border-box; } to your CSS and see if that fixes things.

Here's some code that shows how to do what they are doing, it's been simplified. You can activate a circle by clicking on it.

 function win(userChoice, computerChoice) { document.getElementById(userChoice).classList.add("green-glow"); setTimeout(function() { document.getElementById(userChoice).classList.remove("green-glow"); }, 1000); } // seimple way to pick a random element document.getElementById("choice1").addEventListener("click", function() { win("choice1", ""); }); document.getElementById("choice2").addEventListener("click", function() { win("choice2", ""); }); document.getElementById("choice3").addEventListener("click", function() { win("choice3", ""); }); 

 .row { display: block; } .circle { position: relative; display: inline-block; width: 50px; height: 50px; border: 4px solid #25272e; border-radius: 50%; margin: 0 20px; padding: 0; transition: all 0.3s ease; } .circle.green-glow { border: 4px solid #4dcc7d; border-radius: 50%; box-shadow: 0 0 10px #3da364; } 

 <div class="row"> <div id="choice1" class="circle"> </div> <div id="choice2" class="circle"> </div> <div id="choice3" class="circle"> </div> </div>