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函数可以自行运行，但我需要在按下按钮时运行它，当我按下按钮时没有任何乐趣＆＃34;按我＆＃34;。！知道什么是错的吗？感谢

Answer 1

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

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

Answer 2

您需要在＆＃34; onclick＆＃34;中调用该函数，而不是编写＆＃34;函数progresBarSim（）＆＃34;。另外，＆＃34; document.Calculation.getElementById＆＃34;产生一个js错误，你应该写＆＃34; document.getElementById＆＃34;。试试这个：

<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>

Answer 3

我摆弄代码并更改了一些内容，请尝试以下代码：

<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(function(){ progressBarSim(al); }, 1);
 if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);

    var finalMessage = document.getElementById('finalMessage');
 }
}
</script>

Answer 4

更改

onclick="function   progressBarSim()"

到

onclick="progressBarSim()"

Answer 5

删除function

之类的onclick="ProgressBarSlim()"

Answer 6

将onclick="function progressBarSim()"替换为onclick="progressBarSim()"

喜欢这样：

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

更换后

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

调用javascript函数

6 个答案: