腳本在頁面加載時執行，應該只在按鈕點擊時執行

Question

我有一個簡單的文件上傳頁面，其中的消息每隔一段時間顯示在底部，所以我使用 setInterval 來延遲。

下面的函數應該只有在點擊“上傳”按鈕后才會啟動，但它會在頁面加載后立即開始執行（這不是項目的登陸頁面）。

如何編寫它以便它不會在頁面加載時開始執行，而是僅在單擊“上傳”按鈕時才執行？

這是包括腳本在內的整個 html 代碼：

我的研究沒有提出與在頁面加載時執行與在按鈕點擊時執行問題直接相關的任何內容。 我發現相反的（希望它在頁面加載時執行，而不是按鈕點擊）但不是這個。 我根本不希望它在頁面加載時執行，只在單擊按鈕時執行。

 var myVar = setInterval(myTimer, 1000); var counter = 0; function myTimer() { counter++; var t = counter; document.getElementById("td1").innerHTML = t; if (counter >= 4) { console.log("REACHED THE END!!"); clearInterval(myVar); } }

 <div class="header_upload" style="margin-left: 14%">File Upload</div> <br><br><br><br> <div class="upload_text" style="margin-left: 6%;"> <div class="upload-btn-wrapper"> <button class="btn">Select file</button> <input type="file" name="fileToUpload" /> </div> </div> <br><br> <div class="upload_text" style="margin-left: 10%;"> <button class="btn" id="submit_btn" type="submit" value="Submit" onClick="myTimer()">Upload</button></div> <br><br><br><br> <div class="upload_text" style="margin-left: 6%;"> <div id="td1" class="text_display">*&nbsp;Step 1</div> <div id="td2" class="text_display">*&nbsp;Step 2</div> <div id="td3" class="text_display">*&nbsp;Step 3</div> <div id="td4" class="text_display">*&nbsp;Step 4</div> </div> <br><br><br><br> <div id="td7" class="text_display" style="color:rgb(175,222,162); font-size: 13pt; margin-left: 8%;">Finished</div> <br>

Answer 1

只需向按鈕添加一個事件偵聽器：

 var myVar, counter; // global vars document.getElementById("submit_btn").addEventListener("click", function() { counter = 0; myVar = setInterval(myTimer, 1000); }); function myTimer() { counter++; var t = counter; document.getElementById("td1").innerHTML = t; if (counter >= 4) { console.log("REACHED THE END!!"); clearInterval(myVar); } }

 <div class="header_upload" style="margin-left: 14%">File Upload</div> <br><br><br><br> <div class="upload_text" style="margin-left: 6%;"> <div class="upload-btn-wrapper"> <button class="btn">Select file</button> <input type="file" name="fileToUpload" /> </div> </div> <br><br> <div class="upload_text" style="margin-left: 10%;"> <button class="btn" id="submit_btn" type="submit" value="Submit" onClick="myTimer()">Upload</button></div> <br><br><br><br> <div class="upload_text" style="margin-left: 6%;"> <div id="td1" class="text_display">*&nbsp;Step 1</div> <div id="td2" class="text_display">*&nbsp;Step 2</div> <div id="td3" class="text_display">*&nbsp;Step 3</div> <div id="td4" class="text_display">*&nbsp;Step 4</div> </div> <br><br><br><br> <div id="td7" class="text_display" style="color:rgb(175,222,162); font-size: 13pt; margin-left: 8%;">Finished</div> <br>