我的HTML5 / Javascript代码不会多次执行相同的功能

我一直在对一小段代码进行故障排除，该代码旨在允许用户选择本地文件，将本地文件的文本内容输入到变量中，然后将变量值转储到文本区域中。

这一切都很好用，用户可以选择一个文件，然后在我的文本区域中查看文件的内容。这就是问题所在，我有一个名为"ClearAll"的按钮，它可以清除文本区域值。如果用户随后再次选择本地文件，则不会发生任何反应，并且文本区域永远不会由本地文件内容填充。

因此，总而言之，选择本地文件一次有效，但第二次无效。

这是我的代码：

<input type="file" id="files" name="file" /><br>
<script>
    function handleFileSelect(evt) {
        var files = document.getElementById('files').files;
        if (!files.length) {
          alert('Please select a file!');
          return;
        }
        var file = files[0];
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                document.getElementById('myInput').textContent = evt.target.result;
            }  
        };
        reader.readAsText(file, "UTF-8");
    }
document.getElementById('files').addEventListener('change', handleFileSelect, false);

。我还有一个按钮，可以成功调用一个函数来清除文本区域，只需将其值设置为 ="" 即可。出于某种原因，文本区域填充只工作一次。谁能明白这是为什么？

快速评论：我想如果我在激活 ClearAll 按钮时更改files的内容，它可能会重置内容，但没有运气。