tengo un div
<div class="display-container"></div>Dentro de este div, quiero agregar algo de texto usando un detector de eventos de JavaScript
const calculatorDisplay = document.querySelector(".display-container") function appendNumber(number) { calculatorDisplay.append(number) } // number event listener one.addEventListener("click", () => { calculatorDisplay.append(1) })funciona perfectamente, pero el problema aquí es que el color de fondo del div del contenedor de visualización es negro, y el color predeterminado para la cadena es negro, entonces, ¿cómo cambio el color de una cadena adjunta? Ya intenté usar la etiqueta de estilo, pero eso no funciona, también intenté usar fontcolor(), pero tampoco funcionó. Me di cuenta de que la cadena adjunta tiene una identificación de #texto, pero no puedo usarla si lo intento.
Definir clase css
<style> .colored-text { color: red; } </style>Y luego cree un elemento de intervalo con una clase de texto coloreado y agréguelo
// number event listener one.addEventListener("click", () => { const newSpan = document.createElement('span'); newSpan.classList.add('colored-text'); newSpan.textContent = 1; calculatorDisplay.append(newSpan); })POR CIERTO. ¿Por qué estás definiendo la función appendNumber y no la estás usando?
Hay varias maneras de lograr esto.
const calculatorDisplay = document.querySelector(".display-container") // changing the color to red calculatroDisplay.style.color = 'red'; // it accepts also Hex colors calculatorDisplay.style.color = '#FF5733' // OR rgb calculatorDisplay.style.color = 'rgb(255,0,0)También es posible agregar un nombre de clase a su div. De esta manera, podría hacer que el código sea probablemente más reutilizable y puede aplicar más estilos que solo colores de una manera simple. (Hay varias formas de incluir CSS en su html, búsquelo en Google ^^)
// within in the <head> tag in the html add a <style> tag. <html> <head> <style> .red-color { color: red } </style> </head> <body> <!-- ..... ---> </body> </html> En el código, ahora puede agregar un nombre de clase usando element.classList.add() O element.classList.remove() para eliminar clases.
function setRedColor(el) { el.classList.add('red-color') } function removeRedColor(el) { el.classList.remove('red-color') } const calculatorDisplay = document.querySelector(".display-container") setRedColor(calculatorDisplay) // ... removeRedColor(calculatorDisplay) Tenga en cuenta que la API element.classList generalmente no permite nombres de clase con un espacio en blanco. Entonces, si tiene varias clases, debe aplicarlas una por una o se encontrará con un error.
Siéntete libre de dejar un comentario