Quiero crear dinámicamente un botón html y una entrada oculta html para enviar algunos datos. El problema es que después de su creación, desaparecen de la página html. ¿Qué estoy haciendo mal? Aquí está el código del script:
convert_button.addEventListener('click', () => { showDownloadBtn(); }); let showDownloadBtn = function() { let downloadBtn = document.createElement('button'); let input = document.createElement('input'); let form = document.getElementById('DownForm'); let div = document.getElementById8('DownBtn'); form.setAttribute('action', 'download'); form.setAttribute('method', 'post'); input.setAttribute('type', 'hidden'); input.setAttribute('value', `123455`); downloadBtn.setAttribute('type', 'button'); downloadBtn.appendChild(document.createTextNode('Download')); div.appendChild(input); div.appendChild(downloadBtn); } <form> <div id="UpBtn"> <input type="file" id="inpFile"> <button id="btnUpload">Upload file</button> </div> </form> <form id="DownForm"> <div id="DownBtn"></div> </form> <div id="id_alert" class="alertmessage"></div>Hay algunos errores que has hecho
el convert_button no está definido, así que const convert_button = document.getElementById("btnUpload");
en la línea donde seleccionó DownBtn, accidentalmente colocó un 8 allí, así que corrija eso let div = document.getElementById8('DownBtn');
ahora está bien y cuando hace clic en el botón hacia abajo, el formulario se envía y vuelve a cargar la página, que es su problema real, por lo que la solución es que el detector de eventos para convertir_botón debe evitar el valor predeterminado, por lo que en lugar de convert_button.addEventListener('click', () => { showDownloadBtn(); }); haz esto convert_button.addEventListener('click', (e) => { e.preventDefault(); showDownloadBtn(); });
luego ocurre otro problema que sigue agregando botones al sitio que no queremos (supongo) toma una variable como let isButtonAdded = false; y verifique la variable antes de llamar a showDownloadBtn() if(isButtonAdded === false){ showDownloadBtn(); } y establecerlo en verdadero cuando agregamos el botón a la página isButtonAdded = true; div.appendChild(input);
por lo que todo el código es el siguiente
<!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>Document</title> </head> <body> <form> <div id="UpBtn"> <input type="file" id="inpFile" /> <button id="btnUpload">Upload file</button> </div> </form> <form id="DownForm"> <div id="DownBtn"></div> </form> <div id="id_alert" class="alertmessage"></div> <script> let isButtonAdded = false; const convert_button = document.getElementById("btnUpload"); convert_button.addEventListener("click", (e) => { e.preventDefault(); if (isButtonAdded === false) { showDownloadBtn(); } }); let showDownloadBtn = function () { let downloadBtn = document.createElement("button"); let input = document.createElement("input"); let form = document.getElementById("DownForm"); let div = document.getElementById("DownBtn"); form.setAttribute("action", "download"); form.setAttribute("method", "post"); input.setAttribute("type", "hidden"); input.setAttribute("value", `123455`); downloadBtn.setAttribute("type", "button"); downloadBtn.appendChild(document.createTextNode("Download")); isButtonAdded = true; div.appendChild(input); div.appendChild(downloadBtn); }; </script> </body> </html>