How to update the text indicator to show progress from the progress bar?

Question

I have this 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>

with this source code:

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

I don't know how to update the numValue text indicator to show me the progress value as the progress bar completes.

Answer 1

在var val = document.getElementById("numValue");之后添加以下代码var val = document.getElementById("numValue");

val.innerHTML = v1 + 5+'%'

Answer 2

 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) + "%"

}

but it's better to write like this :

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

}

Answer 3

why you do not use jquery?

with jquery you can do this :

$(document).ready (function (){
  function incr ()
  {
     $('#numValue').val ($('#p1').val ()+5+'%');
 }
     $('input [type="button"]').click (function (){incr ();});
});

How to update the text indicator to show progress from the progress bar?

Question

3 answers

solution1
1 2018-10-16 16:44:33

solution2
1 ACCPTED 2018-10-16 16:44:37

solution3
0

How to update the text indicator to show progress from the progress bar?

Question

3 answers

solution1 1 2018-10-16 16:44:33

solution2 1 ACCPTED 2018-10-16 16:44:37

solution3 0

solution1
1 2018-10-16 16:44:33

solution2
1 ACCPTED 2018-10-16 16:44:37

solution3
0