Hola, estoy tratando de crear un editor de sitios web con la función de arrastrar y soltar. Agregué un campo de entrada cuando presionas un botón y el texto que escribes se convierte en el texto interno para un elemento "p", pero el elemento "p" no. mostrar Aquí está el código 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"> <title>HTML</title> <!-- HTML --> <!-- Custom Styles --> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <button class="button" id="h1">Header</button> <button class="button" id="h2">Header2</button> <button class="button" id="p">Text</button> <button class="button" id="img">Image</button> </nav> <input type="text" placeholder="type your text here" id="text-field"> <!-- Linking scripts --> <script type="module" src="main.js"></script> <script type="module" src="mouse.js"></script> <script type="module" src="header_button.js"></script> <script type="module" src="header2_button.js"></script> <script type="module" src="image_button.js"></script> <script src="text_button.js"></script>JavaScript:
let text_button = document.getElementById('p') let text_data_holder = document.getElementById('text-field') let paragraph = document.createElement('p') let text_data = '' //Creating text text_button.addEventListener('click', function() { text_data_holder.style.display = 'block' }) text_data_holder.addEventListener('change', function(e) { e.preventDefault() text_data += e.target.value if(text_data == e.target.value){ paragraph.innerText = text_data console.log(text_data) } })