Click here to Skip to main content
15,071,928 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
So I have this program where I update a .txt file and it shows me the content of it.
But now I want it to show me only when I click on the button. 
But I cant identify the **name of the javascript function**.


<pre><input type="file" name="inputfile" id="inputfile">
    <br>

    <div id="output"></div>
    <button onclick="???()">Click me</button>


        <script type="text/javascript">
        document.getElementById('inputfile')
            .addEventListener('change', function () {
                var fr = new FileReader();
                fr.onload = function () {
                    if (!fr.result) { 
                        return;
                    }
                    const resultAsArray = fr.result.split('\r\n'); 
                    let index = 0; 
                    const displayInterval = setInterval(() => { 
                        if (index === (resultAsArray.length - 1)) {
                            clearInterval(displayInterval); 
                            return;
                        }
                        let html$ = document.getElementById('output').innerHTML;
                        html$ += '<div>' + resultAsArray[index] + '</div>'; 
                        document.getElementById('output').innerHTML = html$; 
                        index++; 

                    }, 1000);

                }
                fr.readAsText(this.files[0]);
            })
    </script>



**I got this javascript code from the Internet**


What I have tried:

I have tried several functions names such as, "
fr.onload
" and "fr"
Posted
Updated 22-Sep-21 4:29am

1 solution

The only functions in your code are the one passed to the addEventListener method, and the nested function assigned to the onload property of the FileReader instance. You can't reference either of those functions from elsewhere.

You could change the code to add the event listener to the button instead of the input. But you'd need to replace the references to this within the function, since it would no longer refer to the input element.
HTML
<button id="btn">Click me</button>
JavaScript
document.getElementById("btn").addEventListener("click", function(){
    const input = document.getElementById("inputfile");
    if (!input.files.length) {
        alert("No file selected!");
        return;
    }
    
    const fr = new FileReader();
    fr.onload = function(){ 
        ... 
    };
    
    fr.readAsText(input.files[0]);
});
   
Comments
João Santos 2021 22-Sep-21 10:42am
   
Not working bro...
Richard Deeming 22-Sep-21 11:13am
   
"Not working" is about the least helpful error report you can come up with.

The code in my solution works absolutely fine. If it's "not working" for you, then you need to provide a meaningful description of the problem.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900