Javascript 如何更新文本指示器以显示进度条中的进度？_Javascript_Html

Javascript 如何更新文本指示器以显示进度条中的进度？

javascript html

Javascript 如何更新文本指示器以显示进度条中的进度？,javascript,html,Javascript,Html,我有这个HTML： <head> <script language=JavaScript></script> </head> <body> <progress value="0" max="100" id=p1></progress> <input type=button value='Increse' onClick='incr();'> <div id="numValue"

我有这个HTML：

<head>
  <script language=JavaScript></script> 
</head>
<body>
  <progress value="0" max="100" id=p1></progress>
  <input type=button value='Increse' onClick='incr();'>
  <div id="numValue">0%</div>
</body>
</html>

0%

使用此源代码：

<script language=JavaScript> 
  <!--
  function incr() { 
    var v1=document.getElementById('p1').value;
    document.getElementById("p1").value= v1 + 5;
    var val = document.getElementById("numValue");
  }
  //-->
</script>

我不知道如何更新

numValue

文本指示器，以便在进度条完成时显示进度值。

在

var val=document.getElementById（“numValue”）之后添加以下代码
val.innerHTML=v1+5+'%'

 function incr() { 
   var v1=document.getElementById('p1').value;
   document.getElementById("p1").value= v1 + 5;
   var val = document.getElementById("numValue");
   document.getElementById("numValue").innerHTML = (v1 + 5) + "%"

}  

但最好这样写：
 function incr() { 
  var progress = document.getElementById('p1');
  var numValue = document.getElementById("numValue")
  var newValue = progress.value + 5;
  progress.value = newValue;
  numValue.innerHTML = newValue + "%"

}

为什么不使用jquery
使用jquery，您可以执行以下操作：
$(document).ready (function (){
  function incr ()
  {
     $('#numValue').val ($('#p1').val ()+5+'%');
 }
     $('input [type="button"]').click (function (){incr ();});
});