How do i change the color of an appended string?

leo___ Published at Dev

leo___

I've a div

<div class="display-container"></div>

Inside this div i want to append some text using a JavaScript event listener

const calculatorDisplay = document.querySelector(".display-container")
function appendNumber(number) {
calculatorDisplay.append(number)
}
// number event listener
one.addEventListener("click", () => {
calculatorDisplay.append(1)
})

it work perfecly, but the problem here is that the background color of the display-container div is black, and the default color for string is black, so, how do i change the color of an appended string? i've already tried using the style tag, but that does not work, i've tried using fontcolor() too, but that too doesn't worked. I've noticed that the appended string have an id of #text, but i cannout use it if i try.

Pavel Třupek

Define css class

<style>
.colored-text { 
   color: red;
}
</style>

And then create span element with colored-text class and append it

// number event listener
one.addEventListener("click", () => {
  const newSpan = document.createElement('span');
  newSpan.classList.add('colored-text');
  newSpan.textContent = 1;
  calculatorDisplay.append(newSpan);
})

BTW. why are you defining appendNumber function and not using it?

Collected from the Internet

Please contact [email protected] to delete if infringement.