1

Necesito que cuando se presione agregar se cree un div debajo con exactamente el mismo texto que el escrito dentro del text area, con los saltos de linea incluido. ya que ahora mismo el texto se copia dentro del div pero no con los saltos de linea imagen de la pagina y su mal funcionamiento

 <body>
     <div id="colorInterfas">
    <p>FONDO</p>
        <input type="color" name="color" id="colorFondo">
        <input type="color" name="color" id="colorLetra">
    <p>LETRA</p>
    </div>
   
        <textarea id="input" cols="30" rows="10"></textarea>
   

    <button id="button">agregar</button>
    </div>
    <ul id="container">

    </ul>
    </body>




let text = document.querySelector('#input');
let button = document.querySelector('#button');
let container = document.querySelector('#container');
let colorPickerFondo = document.querySelector('#colorFondo');
let colorPickerLetra = document.querySelector('#colorLetra');



colorPickerFondo.addEventListener('change', () => {

text.style.background = colorPickerFondo.value

})

colorPickerLetra.addEventListener('change', () => {
text.style.color = colorPickerLetra.value

})

if (text.style.background === '') {
text.style.background = colorPickerFondo.value;

}

if (text.style.color === '') {

    text.style.color = colorPickerLetra.value;

}

button.addEventListener('click', () => {

if (text.value.trim().length !== 0) {
    let CONTENT = document.createElement('il');
    CONTENT.classList.add('content');
    CONTENT.textContent = text.value;
    CONTENT.setAttribute('style', ` background: ${text.style.background} ; color: ${text.style.color};  width: 180px; height: 180px;`);
    container.appendChild(CONTENT);

}
});

Con este codigo el texto es copiado, pero todo junto, sin los saltos de linea.

la idea es que se cree un div simulando una nota tipo "post it" debajo

Muchas gracias.

1 respuesta 1

1

Puedes agregar este estilo al id container:

#container {
    white-space: pre
}

O bien este otro:

#container {
    white-space: pre-wrap
}

En cuanto al aspecto, para que parezca un post it, te recomiendo usar textarea con el contenido deshabilitado para que no pueda editarse (no "il" que no existe y cambiar la lista ul por un div). Si usas un textarea no te hace falta la solución via CSS anterior.

Es decir, cambiar esto:

let CONTENT = document.createElement('il');

por esto:

let CONTENT = document.createElement('textarea');
CONTENT.disabled = true;

Aquí te dejo un snippet donde puedes verlo en acción:

let text = document.querySelector('#input');
let button = document.querySelector('#button');
let container = document.querySelector('#container');
let colorPickerFondo = document.querySelector('#colorFondo');
let colorPickerLetra = document.querySelector('#colorLetra');

colorPickerFondo.addEventListener('change', () => {
  text.style.background = colorPickerFondo.value
})

colorPickerLetra.addEventListener('change', () => {
  text.style.color = colorPickerLetra.value
})

if (text.style.background === '') {
  text.style.background = colorPickerFondo.value;
}

if (text.style.color === '') {
  text.style.color = colorPickerLetra.value;
}

button.addEventListener('click', () => {
  if (text.value.trim().length !== 0) {
    let CONTENT = document.createElement('textarea');
    CONTENT.classList.add('content');
    CONTENT.disabled = true;
    CONTENT.textContent = text.value;
    CONTENT.setAttribute('style', ` background: ${text.style.background} ; color: ${text.style.color};  width: 180px; height: 180px;`);
    container.appendChild(CONTENT);
  }
});
#container {
    white-space: pre;
}
<div id="colorInterfas">
  <p>FONDO</p>
  <input type="color" name="color" id="colorFondo">
  <input type="color" name="color" id="colorLetra">
  <p>LETRA</p>
</div>
<textarea id="input" cols="30" rows="10"></textarea>
<button id="button">agregar</button>
<div id="container"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.