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" class="alertmessage"></div>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" 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>