When I click on reset button site stopped responding as it was before

Question

I'm making a grammar check website using flask, when I reset the textarea by using the reset button, it allows me to upload the file but it does not display the content in that text file.

document.getElementById('myFile').addEventListener('change', function() {
  var fr = new FileReader();
  fr.onload = function() {
    document.getElementById('txt1').textContent = fr.result;
  }
  fr.readAsText(this.files[0]);
})


  Enter Your Text
  {{sample_input}}

mplungjan · Answer

No need for the javascript: label in the onclick.
Why not use eventListeners instead of inline code?
Where is eraseText? If you have a JS error, like you have now, the page is no longer in a valid state

If you wrap in a form you can use reset and if needed also clear the field if it is prefilled from the server

window.addEventListener("DOMContentLoaded", () => {
  const textarea = document.getElementById('txt1');
  document.getElementById('myFile').addEventListener('change', function() {
    var fr = new FileReader();
    fr.onload = function() {
      textarea.value = fr.result;
    }
    fr.readAsText(this.files[0]);
  })
  document.getElementById("myForm").addEventListener("submit", (e) => {
    e.preventDefault(); // stop submission if you need to AJAX
    // do whatever "loading" was doing
  })
  document.getElementById("clear").addEventListener("click", (e) => {
   e.target.form.reset(); // reset the form 
   textarea.value = ""; // clear the area
  })
})


  
    Enter Your Text
    {{sample_input}}

Taufik Romadhon · Answer

Based on documentation, to use Form reset method

Have you try to use

document.getElementById("myForm").reset();

When I click on reset button site stopped responding as it was before

2 Answers