How to prevent dynamically generated html button from disappearing, after its creation?-CodePudding

I want to create dynamically a html button and html hidden input to submit some data. The problem is that after their creation, they disappear from the html page. What am I doing wrong? Here it is the script code:

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" ></div>

CodePudding user response：

There are some mistakes you've done so

the convert_button is not defined so define it const convert_button = document.getElementById("btnUpload");
in the line where you selected the DownBtn you accidently put a 8 there so fix that let div = document.getElementById8('DownBtn');

now it's fine and when you click down button the form get submitted and reloads the page which is your actual problem so the solution is that the event listener to convert_button should prevent Default so instead of convert_button.addEventListener('click', () => { showDownloadBtn(); }); do this convert_button.addEventListener('click', (e) => { e.preventDefault(); showDownloadBtn(); });

then another problem occurs that it keeps adding buttons to the site which we don't want (I Guess) take a variable like let isButtonAdded = false; and check the variable before we call showDownloadBtn() if(isButtonAdded === false){ showDownloadBtn(); } and set it to true when we add the button to page isButtonAdded = true; div.appendChild(input);

so the whole code is as follow

<!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" ></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>