如何刷新javascript中變量的內容

Question

我有一個包含各種字段的代碼...

<div id="tabs-5" data-content-theme="b" data-theme="b" class="ui-body ui-body-b ui-corner-all">
  <form id="fileEn">
    <div data-role="fieldcontain">
      <label for="files">Upload Image Files</label>
      <input id="files" type="file" data-clear-btn="true" value="" multiple/>
      <div id="progress_bar">
        <div class="percent">0%</div>
      </div>
      <output id="result1"></output>
      <output id="result2"></output>
      <output id="result3"></output>
      <output id="result4"></output>
    </div>
    <div data-role="fieldcontain">
      <label for="pwdF">Enter Password:</label>
      <input type="password" name="pwdF" id="val4" value="" />
    </div>
    <div data-role="fieldcontain">
      <label for="bitsF" class="select">Choose bits:
      </label>
      <select name="bitsF" id="val5">
        <option value="128">128</option>
        <option value="192">192</option>
        <option value="256">256</option>
      </select>
    </div>
    <input type="button" id="btn" onclick="load1();return false;" value="Compute" data-theme="b" data-inline="true" />
    <input type="reset" value="Reset" data-theme="b" data-inline="true" />
  </form>
</div>

這里點擊一個名為“計算”的按鈕，調用 load1() 函數...這個 load1() 函數進行一些計算並保存計算的文件...例如：file1.doc...接下來我按下“重置”按鈕獲取空字段......現在當我再次按下“計算”按鈕時，當前計算的文件例如：file2.doc以及先前計算的文件（file1.doc）被保存......這是因為先前的內容是沒刪。。

任何人都可以建議我如何執行類似於 Ctrl+F5 onclick 的操作（最好是重置按鈕本身，它反過來調用不同的函數以刷新）來刷新內容..這樣只有當前計算文件被保存 (file2.doc) 而不是所有以前的 (file1.doc)...

Answer 1

您可以在表單執行重置操作時執行一些操作，方法是：

var fileEn = document.getElementById("fileEn"); // Get the form identifier.
fileEn.addEventListener("reset", function() { // When the form performs the reset action.
   reset(); // Call the reset function.
});

像這樣的東西：

 (function() { window.onload = function() { function load1() { alert("The compute button has been pressed."); } function reset() { alert("The reset button has been pressed."); var files = document.getElementById("files"); files.value = ""; // To reset the input file field. } var btn = document.getElementById("btn"); btn.addEventListener("click", function() { load1(); }); var fileEn = document.getElementById("fileEn"); // Get the form identifier. fileEn.addEventListener("reset", function() { // When the form performs the reset action. reset(); // Call the reset function. }); }; })();

 <div id="tabs-5" data-content-theme="b" data-theme="b" class="ui-body ui-body-b ui-corner-all"> <form id="fileEn"> <div data-role="fieldcontain"> <label for="files">Upload Image Files</label> <input id="files" type="file" data-clear-btn="true" value="" multiple/> <div id="progress_bar"> <div class="percent">0%</div> </div> <output id="result1"></output> <output id="result2"></output> <output id="result3"></output> <output id="result4"></output> </div> <div data-role="fieldcontain"> <label for="pwdF">Enter Password:</label> <input type="password" name="pwdF" id="val4" value="" /> </div> <div data-role="fieldcontain"> <label for="bitsF" class="select">Choose bits: </label> <select name="bitsF" id="val5"> <option value="128">128</option> <option value="192">192</option> <option value="256">256</option> </select> </div> <input type="button" id="btn" value="Compute" data-theme="b" data-inline="true" /> <input type="reset" value="Reset" data-theme="b" data-inline="true" /> </form> </div>