Могу ли я изменить текст абзаца и в то же время сохранить CSS (цвет) для элементов диапазона внутри абзаца?

Question

Это HTML, который я пытаюсь изменить, и я пытаюсь сохранить цвет (CSS) для слов, заключенных в теги - Paper и Rock. В основном я хочу изменить текст в и

и сохранить CSS (раскраску) для двух тегов.

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

Вставьте промежутки с правильными идентификаторами при изменении innerHTML

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

Answer 2

В своей функции попробуйте

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

Answer 3

Простое решение этого - обернуть ваш код элементом span как таковым

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

Лучше было бы обрабатывать ваш ответ модульно, добавляя интервалы к каждой части вашего ответа и изменяя внутреннюю HTML в зависимости от статуса 'игры'

<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>