Why Progress bar don't stop at my value placed in the input box?-CodePudding

I have the following code:

var i = 0;

var My_Button = document.getElementById("btn1")

var Numerica = parseInt(My_Button.value)


function update() {
  var element = document.getElementById("myprogressBar");
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= Numerica) {
      clearInterval(identity);
    } else {
      width  ;
      element.style.width = width   '%';
    }
  }
}

#Progress_Status {
  width: 50%;
  background-color: #ddd;
}

#myprogressBar {
  width: 2%;
  height: 20px;
  background-color: red;
}

<h3>Example of Progress Bar Using JavaScript</h3>
    
<input style="height:50px; width:50px; font-size:30px" type = text id = "btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>

<p>Pogress Bar</p>

<div id="Progress_Status">
  <div id="myprogressBar"></div>
</div>

<br>
<button onclick="update()">Start Download</button>

I want to decide a number inside the Input box and make to that the bar progress until that decided number. Why is the previously showed code the bar never stop? I am transforming right the value into an integer

CodePudding user response：

First, if you want to take value from an input element, you need to take .value of your getElementById().

Second, you tried taking the value before you actually inserted any value, basically on page load.

Conclusion:

I've moved those lines of code inside your update() function, and added .value on your My_Button variable. That's all that's changed.

var My_Button = document.getElementById("btn1").value;
var Numerica = Number(My_Button)

var i = 0;

function update() {
  var element = document.getElementById("myprogressBar");
  var width = 1;
  var identity = setInterval(scene, 10);
  var My_Button = document.getElementById("btn1").value;
  var Numerica = Number(My_Button)
console.log(Numerica);
  function scene() {
    if (width >= Numerica) {
      clearInterval(identity);
    } else {
      width  ;
      element.style.width = width   '%';
    }
  }
}

<!DOCTYPE html>
<html>
<style>
#Progress_Status {
  width: 50%;
  background-color: #ddd;
}

#myprogressBar {
  width: 2%;
  height: 20px;
  background-color: red;
}
</style>
<body>

<h3>Example of Progress Bar Using JavaScript</h3>

<input style="height:50px; width:50px; font-size:30px" type = text id = "btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>

<p>Pogress Bar</p>

<div id="Progress_Status">
  <div id="myprogressBar"></div>
</div>

<br>
<button onclick="update()">Start Download</button>

<script src ="index.js"></script>

</body>
</html>

CodePudding user response：

You don't need to use interval in your case. You can achieve it with transition in CSS.

Side note if you want to get a value from an input field, you need to call .value. In your case, it is document.getElementById("btn1").value.

var i = 0;

var My_Button = document.getElementById("btn1");

function update() {
  var element = document.getElementById("myprogressBar");
  var width = My_Button.value || 1; //need to get value every time
  element.style.width = width   '%';
}

#Progress_Status {
  width: 50%;
  background-color: #ddd;
}

#myprogressBar {
  width: 1%;
  height: 20px;
  background-color: red;
  transition: width .2s;
}

<!DOCTYPE html>
<html>
<body>

<h3>Example of Progress Bar Using JavaScript</h3>

<input style="height:50px; width:50px; font-size:30px" type = text id="btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>

<p>Pogress Bar</p>

<div id="Progress_Status">
  <div id="myprogressBar"></div>
</div>

<br>
<button onclick="update()">Start Download</button>

</body>
</html>

If you still want to use interval, you need to call clearInterval every time when you trigger update() like below

var i = 0;

var My_Button = document.getElementById("btn1")

var identity; //move the declaration here
function update() {
  var Numerica = parseInt(My_Button.value) //need to get value every time
  var element = document.getElementById("myprogressBar");
  var width = 1;
  //var identity = setInterval(scene, 10); //remove this
  if(identity) {
     clearInterval(identity) //clear the interval if you click Start Download again
  }
  identity = setInterval(scene, 10);
  function scene() {
    if (width >= Numerica) {
      clearInterval(identity);
    } else {
      width  ;
      element.style.width = width   '%';
    }
  }
}

#Progress_Status {
  width: 50%;
  background-color: #ddd;
}

#myprogressBar {
  width: 1%;
  height: 20px;
  background-color: red;
}

<!DOCTYPE html>
<html>
<body>

<h3>Example of Progress Bar Using JavaScript</h3>

<input style="height:50px; width:50px; font-size:30px" type = text id="btn1" name = "btn10" > <span id ="option1" style="font-size:30px">Option1</span>

<p>Pogress Bar</p>

<div id="Progress_Status">
  <div id="myprogressBar"></div>
</div>

<br>
<button onclick="update()">Start Download</button>

</body>
</html>