Actualmente estoy trabajando en un proyecto en el que debo tener un elemento de área de texto con una identificación de editor que actualice un elemento div con una identificación de vista previa con su valor a medida que el usuario escribe en él. Actualmente, el elemento de vista previa solo se actualiza con el texto una vez que el usuario deja de enfocarse en el elemento del editor; sin embargo, quiero que se actualice inmediatamente a medida que el usuario escribe. Sé que esto sería fácil de lograr en React, pero ¿hay alguna manera de hacerlo en JavaScript simple? Este es el código que tengo hasta ahora:
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Markdown Previewer</title> </head> <body> <div id="content"> <textarea id="editor"> </textarea> <div id="preview"> </div> </div> </body> </html> JAVASCRIPT const preview = document.getElementById('preview'); const editor = document.getElementById('editor'); editor.addEventListener('change', (event) => { console.log(event); preview.textContent = event.target.value; })Cualquier ayuda apreciada.
Cambie el evento a input en lugar de change . La input se activa cada vez que cambia el valor de un elemento, incluso cuando todavía está enfocado. El evento de change , por otro lado, se activará cuando se cambie un elemento y luego pierda el foco.
Leer más: https://html.com/attributes/textarea-onchange/#ixzz7AsNuUXNU
const preview = document.getElementById('preview'); const editor = document.getElementById('editor'); editor.addEventListener('input', (event) => { console.log(event); preview.textContent = event.target.value; }) HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Markdown Previewer</title> </head> <body> <div id="content"> <textarea id="editor"> </textarea> <div id="preview"> </div> </div> </body> </html>este es un código que funciona, debe colocar su javascript después del código html, javascript es un lenguaje de secuencias de comandos, lo que significa que se ejecuta línea por línea, por lo que si lo coloca antes de la vista previa y el elemento del editor, entonces está intentando acceder a ellos antes de que se inicialicen, y no funcionará, cuando coloque el código javascript después del código html, el código funcionará ya que el elemento de área de texto ya está inicializado y disponible para usar
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" <title>Markdown Previewer</title> </head> <body> <div id="content"> <textarea id="editor"> </textarea> <div id="preview"> </div> </div> <script> console.log('yes') const preview = document.getElementById('preview'); const editor = document.getElementById('editor'); editor.addEventListener('change', (event) = > { preview.textContent = event.target.value; }) </script> </body> </html>