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]);
})

<div class='text-content'>
  <legend>Enter Your Text</legend>
  <textarea id="txt1" name="text" rows="50" cols="30" autofocus required placeholder="Either type text manually or upload .txt file. ONLY 500 CHARACTER LIMIT." value="">{{sample_input}}</textarea>
  <div id="content">
    <input id="myFile" name="myFile" type="file" style="font-size:15px; " />
    <button type="submit" value="Submit" onclick="javascript:loading();">Check Grammar Here</button>
    <button id="btn" onclick="javascript:eraseText();" style="display: inline"> Reset </button>
  </div>
</div>

CodePudding user response：

Based on documentation, to use Form reset method

Have you try to use

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

CodePudding user response：

1. No need for the javascript: label in the onclick.
2. Why not use eventListeners instead of inline code?
3. 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
  })
})

<div class='text-content'>
  <form id="myForm">
    <legend>Enter Your Text</legend>
    <textarea id="txt1" name="text" rows="10" cols="30" autofocus required placeholder="Either type text manually or upload .txt file. ONLY 500 CHARACTER LIMIT." value="">{{sample_input}}</textarea>
    <div id="content">
      <input id="myFile" name="myFile" type="file" style="font-size:15px; " />
      <button type="submit" value="Submit">Check Grammar Here</button>
      <button type="reset" style="display: inline"> Reset </button>
      <button type="button" id="clear" style="display: inline"> Clear </button>
    </div>
  </form>
</div>