javascript - 调用 JavaScript 函数

Question

我需要调用 JavaScript 函数来运行进度条，这是我的代码:

<form  name="Calculation" method="post">

<progress id="progressBar" value="0" max="100" style="width:300px;">     </progress>

<span id="status"></span> 

<h1 id="finalMessage"></h1> 

<input type="button" id="btn2" value="Press me!" onclick="function   progressBarSim(al)"/>

</form>

 <script>
function progressBarSim(al) {

 var bar = document.Calculation.getElementById('progressBar');

  var status = document.Calculation.getElementById('status');

  status.innerHTML = al + "%";

  bar.value = al;

  al++;

  var sim = setTimeout("progressBarSim(" + al + ")", 1);

    if (al == 100) {

    status.innerHTML = "100%";

    bar.value = 100;

    clearTimeout(sim);

    var finalMessage = document.getElementById('finalMessage');

    }
    }

   var amountLoaded = 0;


    progressBarSim(amountLoaded);

     </script>

javascript函数可以独立工作，但是我需要在按下按钮时运行它，并且当我按下“按我”按钮时没有任何反应。!知道出了什么问题吗？谢谢

Answer 1

您需要在“onclick”中调用该函数，而不是编写“function progresBarSim()”。另外，“document.Calculation.getElementById”会产生js错误，您应该编写“document.getElementById”。试试这个:

<form  name="Calculation" method="post">

<progress id="progressBar" value="0" max="100" style="width:300px;">     </progress>

<span id="status"></span> 

<h1 id="finalMessage"></h1> 

<input type="button" id="btn2" value="Press me!" onclick="progressBarSim(0)"/>

</form>

 <script>
function progressBarSim(al) {

 var bar = document.getElementById('progressBar');

  var status = document.getElementById('status');

  status.innerHTML = al + "%";

  bar.value = al;

  al++;

  var sim = setTimeout("progressBarSim(" + al + ")", 1);

    if (al == 100) {

    status.innerHTML = "100%";

    bar.value = 100;

    clearTimeout(sim);

    var finalMessage = document.getElementById('finalMessage');

    }
    }

   var amountLoaded = 0;


    progressBarSim(amountLoaded);

     </script>