This is my html code snippet:
<div class="container-fluid">
<div class="drag-area">
<span class="header"> Drag & Drop </span>
<span class="header"> or <span class="browse_button">browse</span> </span>
<input type="file" hidden/>
</div>
<button type="button" id="reset_button" class="btn btn-outline-secondary"
disabled="disabled">Reset</button>
<button type="button" id="convert_button" class="btn btn-primary"
disabled="disabled">Convert</button>
And this is my javascript code snippet:
const dragArea = document.querySelector('.drag-area');
const dragText = document.querySelector('.header');
let button = document.querySelector('.browse_button');
let input = document.querySelector('input');
let reset_button = document.querySelector('#reset_button');
let convert_button = document.querySelector('#convert_button');
// When reset button clicked
reset_button.onclick = () => {
input.value = "";
console.log(input.value);
document.getElementById('nnn').remove(); // This is image id
reset_button.disabled = true; // To disable reset button
convert_button.disabled = true; // To disable convert button
dragArea.classList.remove('active');
result_div.classList.add('result_none_class'); // Add result_none_class class into
result_div to hide this result div
}
When I clicked on reset button I can remove the image from the div but the drag and drop div not display which is shown in first image above it’s show like this_
Image removed but drag&drop div not visible as shown in first image
Can anyone please tell me how can I display drag and drop screen on reset button clicked?