Can i change the paragraph text and at the same time keep the CSS(the coloring) for the span elements inside the paragraph?

Question

This is the HTML which I'm trying to change and I'm trying to keep the coloring(CSS) for the words wrapped in tags - Paper and Rock. Basically I want to change the text in the and the

and keep the CSS(coloring) for the 2 tags.

HTML:

    <div class="message">
        <p><span id="result-user">Paper</span> beats <span id="result-comp">Rock</span>!You win!</p>
    </div>

CSS:

    #result-user{
        color: rgb(246, 189, 76);
    }
    #result-comp{
        color: rgb(246, 189, 76);
    }

JavaScript:

    let resultUserMessage_span = document.getElementById('result-user');
    let resultCompMessage_span = document.getElementById('result-comp');
    let resultMessage_p = document.querySelector('.message > p');
    userChoice = "Rock";
    compChoice = "Paper";

    resultMessage_p.innerHTML = `${userChoice} loses to ${compChoice}!You lose!`;

Answer 1

Insert spans with the correct ids when changing the innerHTML

resultMessage_p.innerHTML = `<span id="result-user">${userChoice}</span> loses to <span id="result-comp">${compChoice}</span>! You lose!`;

Answer 2

In your function, try

document.getElementById("p1").innerHTML = "<span id="result-user">${userChoice}</span> beats <span id="result-comp">${compChoice}</span>!You lose!";

Answer 3

The simple solution to this is to wrap your code with the span element as such

resultMessage_p.innerHTML = `<span id="result-user">${userChoice}</span> loses to <span id="result-comp">${compChoice}</span> !You lose!`

A better could be to treat your answer modularly by adding spans to each part of your answer and changing the innerHTML depending on the status of the 'game'

<p>
  <span id="result-user">Rock</span>
  <span id="result-status"> loses to </span> 
  <span id="result-comp">Paper</span>!
  <span id="final-result"> You lose!</span>
</p>