I wrote a javascript to fill my progressbar with looking to different strings in my textbox. I can get it to work for one progressbar, but if i add a second one they will not work.
Here is my code for when i use only one progressbar.
<script>
function move1() {
var textarea1 = document.getElementById('TbProd1');
var word1 = "Vrijgegeven";
var word2 = "Gepicked";
var word3 = "Voltooid";
var textValue = textarea1.value;
var elem = document.getElementById("myBar");
if (textValue == (word1)) {
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word2)){
var width = 25;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word3)) {
var width = 50;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
}
</script>
and here is my reusable script for multiple progressbars:
<script>
window.onload = function () {
load('TbProd1', 'myBar', 'LblProgBar1');
load('TbProd2', 'myBar2', 'LblProgBar2');
}
function load(TextboxID, BarID, LblBarID) {
var textarea1 = document.getElementById(TextboxID);
var word1 = "Vrijgegeven";
var word2 = "Gepicked";
var word3 = "Voltooid";
var textValue = textarea1.value;
var elem = document.getElementById(BarID);
if (textValue == (word1)) {
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById(LblBarID).innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word2)){
var width = 25;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById(LblBarID).innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word3)) {
var width = 50;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById(LblBarID).innerHTML = width * 1 + '%';
}
}
}
}
</script>
Where is the mistake in my reusable code? It has something to do with window.move1 i think but dot know what.
Edit1: It seems that it cant read the values of my textboxes, how do i make the link with my reusable code?
You should try to put your 'frame' function in a local variable instead of just declaring it with the function keyword. Just declaring a function like that create conflicts in JS engine and the scope of variables become really hard (see impossible) to manage.
Something like
var id = null,
frameFunction = function() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById(LblBarID).innerHTML = width * 1 + '%';
}
}
id = setInterval(frameFunction , 10);
Also window.onload event MIGHT trigger before DOM is ready for manipulation. This will result in your code being unable to access dom objects and attributes.
You can solve this many ways.
Use jquery $(document).ready();
Use a stripped down library just for DomReady (https://code.google.com/archive/p/domready/)
Use plain ECMA implementation (should work in all modern browsers)
ex.
document.addEventListener("DOMContentLoaded", function() {
// code...
});
You can see a working example of the latest here
https://jsfiddle.net/zjhyqrff/1/
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 3 years ago.
i'm sorry to ask your help.
I'm trying to get 3 functions in one, using array in Javascript.
Actually, I've this code to run loading bars for each language I'm trying to learn
function js() {
var elem3 = document.getElementById("barone");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 20) {
clearInterval(id);
} else {
width++;
elem3.style.width = width + '%';
elem3.innerHTML = width * 1 + '%';
}
}
}
function php() {
var elem4 = document.getElementById("bartwo");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 30) {
clearInterval(id);
} else {
width++;
elem4.style.width = width + '%';
elem4.innerHTML = width * 1 + '%';
}
}
}
function sql() {
var elem5 = document.getElementById("barthree");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 30) {
clearInterval(id);
} else {
width++;
elem5.style.width = width + '%';
elem5.innerHTML = width * 1 + '%';
}
}
}
That's fine and it works well, but i'm trying to make an array for the div and the percent of loading bars
I've tried several times to shorten this code, and i'm actually stuck. This is the most (i think), closer to the answer:
var skillBar = ["barone","bartwo","barthree"];
var percentBar = [20, 30, 30];
function skill() {
for (var j = 0; j < skillBar.length; j++) {
var elem = document.getElementById(skillBar[j]);
console.log(skillBar[j]);
console.log(percentBar[j]);
var width = 0;
var id = setInterval(frame, 50);
function frame() {
console.log(percentBar[j]) <--- This return undefined
if (width >= percentBar[j]) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
}
but this doesn't work. The first two console.log works fine. It returns me the values in both arrays, but the third one returns me undefined, so the loading bar never ends. Worst, it only affect the last bar. First and 2nd doesn't load.
I know it's probably obvious for most of you, but I need a little help to make things work.
P.S : Sorry for my english, it's not my native language.
I think you need to take out fram function to outside of the function skill
var skillBar = ["barone","bartwo","barthree"];
var percentBar = [20, 30, 30];
var id;
function frame(j) {
console.log(percentBar[j])
if (width >= percentBar[j]) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
function skill() {
for (var j = 0; j < skillBar.length; j++) {
var elem = document.getElementById(skillBar[j]);
console.log(skillBar[j]);
console.log(percentBar[j]);
var width = 0;
id = setInterval(frame(j), 50);
}
}
skill()
<div id="barone"></div>
<div id="bartwo"></div>
<div id="barthree"></div>
I am following this tutorial on w3schools about how to implement a simple progress bar
I want the progress bar to finish by force the value to 100 or some other way.
function move(w) {
var width = parseInt(w);
var elem = document.getElementById("myBar");
var id = setInterval(frame, 300);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width+=1;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
Call function
move(10);
Now I want it to finish I call it again
move(100);
the above isn't working though, why?
<button onclick="move(54)">Click Me</button>
<script>
function move(len) {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= len) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
passing an argument and accepting it solves this
Calling the function move(100) is not working just because of there is no logic for it.
You have to add this. See below code:
function move(w) {
var width = parseInt(w);
var elem = document.getElementById("myBar");
var id = setInterval(frame, 300);
function frame() {
if (width > 100) {
clearInterval(id);
} else if(width == 100) {
elem.style.width = width + '%'; //add this line
elem.innerHTML = width * 1 + '%'; //add this line
} else {
width+=1;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
I have two pieces of java script, one for showing the result percentage in a progress bar, one to show the speed in a different bar.
at the moment only one bar is reviving data the other is not.
**Javascript*
// Progress bar javascript reults
{
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-percentile-2").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + '%';
}
}
}
// End javascript progress bar results
// Progress bar javascript speed
{
var elem = document.getElementById("myBarspeed");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-speed").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("speed").innerHTML = width * 1 + '%';
}
}
}
// End javascript progress bar speed
HTML
<div class="scale-container-main ">
<div id="percentile-scale" class="scale">
results bar: Your results
<div id="demo">0%</div>
<div class="myProgress">
<div id="myBar" style="width:0"></div>
</div>
speed bar: Your speed
<div id="speed">0%</div>
<div class="myProgress">
<div id="myBarspeed" style="width:0"></div>
</div>
</div>
</div>
You could use let instead of var inside each block, and
let frame = function() { .... }
but frame would have to be moved above setInterval line
Also, the above only works on recent decent broswers, which means it wont work in IE
An alternative, equally valid method is to use IIFE's - this works in IE!
(function() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-percentile-2").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + '%';
}
}
}());
// End javascript progress bar results
// Progress bar javascrip speed
(function() {
var elem = document.getElementById("myBarspeed");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-speed").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("speed").innerHTML = width * 1 + '%';
}
}
}());
The only advantage to the above is that variable names can be useful and meaningful and guaranteed not to clash with anything else (sort of)
You can't have two functions with the same name. Rename one 'frame' function to something else and change it in your setInterval. Also use different variables to store the interval in.
I have a js function that sets the width of a progress bar, i have also recently added a new id see bellow
(function() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-percentile-2").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + document.getElementById("results-suffix").innerHTML ;
}
}
}());
I am calling this in HTML like
<div class="myProgress">
<div id="myBar" style="width:0">
<div id="demo"><span id="results-suffix"></span></div>
<!--<div id="demo"></div>-->
</div>
</div>
<span id="results-percentile-2"></span>%
Problem comes with the second ID results-suffix this works but now the first results-percentile-2 dose not work, seems i can have one or the other, what am i doing wrong.
Thanks.
Updated
(function() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 100)) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("results-percentile-2").innerHTML = width;
}
}
}());
I am doing a small javascript animation. this is my code :
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
heading.onclick = function () {
var divHeight = 250;
var speed = 10;
var myInterval = 0;
alert(divHeight);
slide();
function slide() {
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
alert('i am called as slide down')
}
}
function slideUp() {
var anima = document.getElementById('anima');
if (divHeight <= 0) {
divHeight = 0;
anima.style.height = '0px';
clearInterval(myInterval);
} else {
divHeight -= speed;
if (divHeight < 0) divHeight = 0;
anima.style.height = divHeight + 'px';
}
}
function slideDwn() {
var anima = document.getElementById('anima');
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
} else {
divHeight += speed;
anima.style.height = divHeight + 'px';
}
}
}
}
i am using above code for simple animation. i need to get the result 250 on the first click, as well second click i has to get 0 value. but it showing the 250 with unchanged. but i am assigning the value to set '0', once the div height reached to '0'.
what is the issue with my code? any one help me?
Everytime you click on the div the divHeight variable is reset to 250, thus your code never calls slideDwn. Moving the divHeight declaration outside the event handler should do the trick.
Also, your div wont have the correct size when any of the 2 animations end. You're setting the divHeight variable to 250 or 0 correctly, but never actually setting anima.style.height after that.
I've rewritten your code into something simpler and lighter. The main difference here is that we're using a single slide() function here, and that the height of the div in question is stored in a variable beforehand to ensure that the element slides into the correct position.
Note that this is a very simplistic implementation and assumes that the div carries no padding. (The code uses ele.clientHeight and ele.style.height interchangeably, which admittedly, is a pretty bad choice, but is done here to keep the code simple)
var heading = document.getElementsByTagName('h1')[0],
anima = document.getElementById('anima'),
divHeight = anima.clientHeight,
speed = 10,
myInterval = 0,
animating = false;
function slide(speed, goal) {
if(Math.abs(anima.clientHeight - goal) <= speed){
anima.style.height = goal + 'px';
animating = false;
clearInterval(myInterval);
} else if(anima.clientHeight - goal > 0){
anima.style.height = (anima.clientHeight - speed) + 'px';
} else {
anima.style.height = (anima.clientHeight + speed) + 'px';
}
}
heading.onclick = function() {
if(!animating) {
animating = true;
var goal = (anima.clientHeight >= divHeight) ? 0 : divHeight;
myInterval = setInterval(slide, 13, speed, goal);
}
}
See http://www.jsfiddle.net/yijiang/dWJgG/2/ for a simple demo.
I've corrected your code a bit (See working demo)
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
var anima = document.getElementById('anima');
var divHeight = 250;
heading.onclick = function () {
var speed = 10;
var myInterval = 0;
function slideUp() {
divHeight -= speed;
if (divHeight <= 0) {
divHeight = 0;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slideDwn() {
divHeight += speed;
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slide() {
console.log(divHeight )
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
}
}
slide();
}
}