Итак, у меня есть эта программа, в которой я обновляю файл .txt, и она показывает мне его содержимое. Но теперь я хочу, чтобы он показывался мне только тогда, когда я нажимаю на кнопку. Но это не просыпается.


<div id="output"></div>
<button id="btn">Click me</button>

  <script type="text/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 () {
            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>
    

Я получил этот код javascript из Интернета

0
João Santos 22 Сен 2021 в 17:22

3 ответа

Лучший ответ

Вы можете назвать функцию, а затем изменить, чтобы получить файлы из ввода, поэтому просто замените this.files [0] на файл, чем вы получили из ввода.

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

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


<script type="text/javascript">
    function test() {
        var inputElement = document.getElementById('inputfile');
        var fileList = inputElement.files;
        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(fileList[0]);
    }
</script>
0
naxsi 22 Сен 2021 в 14:43

Попробуйте сделать это:

Где бы вы ни занимались HTML-материалами:

<button id="button-id">Click Me</button>

Затем внутри вашего JavaScript:

let button = document.getElementById('button-id')
button.addEventListener("click", theFunction);

function theFunction() {
//Code to be executed when the button is pressed..
}
1
Nahh 22 Сен 2021 в 14:32

Дайте идентификатор кнопке, затем используйте этот код.

    document.getElementById('buttonID')
        .addEventListener('click', function (){
   //statements
})
0
Asad Gulzar 22 Сен 2021 в 14:27