Ok, for brevity's sake, I'm just including the javascript code itself. If the HTML or CSS is really needed, I'll update the post.
The objective: I've got a table with rows (displaying tasks), and I have a progress bar to the right of each task showing how much time has elapsed.
The problem: only the first progress bar works. All subsequent progress bars just show a completely filled-up bar. Upon looking at the console log, the program isn't looping at all. It performs no calculations for any rows other than the first. I've tried moving various variables inside and outside the loop, but no cigar.
Please forgive me if the code looks terrible and/or the answer is obvious. This is essentially my first real javascript 'program.'
var Table = document.getElementsByTagName("table");
var Row = document.getElementsByTagName("tr");
var rowDisplay = document.getElementsByTagName("td");
function fillBar(timeElapsedPercent) {
for (i = 0; i < rowDisplay.length; i++) {
var eachRow = rowDisplay.item(i);
const interval = setInterval(() => {
// Grabbing the needed info from the cells
var taskName = rowDisplay[0].innerText;
var rawDeadline = rowDisplay[1].innerText;
var rawStartTime = rowDisplay[2].innerText;
var bar = document.querySelector('.bar');
//calculations for the progress bar
var now = new Date();
var startTime = new Date(rawStartTime.replace(/(am|pm)/, ''));
var deadline = new Date(rawDeadline.replace(/(am|pm)/, ''));
var timeTotal = Math.abs(deadline - startTime);
var timeTotalPercent = Math.abs(timeTotal / 60000);
console.log('value for total time in minutes of', taskName, 'is', timeTotalPercent);
var nowTillDeadline = Math.abs(deadline - now);
var nowTillDeadlinePercent = Math.abs(nowTillDeadline / 60000);
var timeElapsed = Math.abs(timeTotalPercent - nowTillDeadlinePercent);
var timeElapsedPercent = Math.abs((timeElapsed / timeTotalPercent) * 100);
// moving the progress bar
bar.style.width = timeElapsedPercent + '%';
if (timeElapsedPercent >= 99) {
bar.style.width = '100%';
clearInterval(interval);
}
}, (1*1000))
}
}
fillBar();
All right then, time to answer my own question again.
I'll include the HTML for the row, then the Javascript to manipulate it:
<td class="col-sm-4">
<div id="progressBarBackground">
<div class="bar" id="progressBar"></div>
</div>
</td>
function fillBar() {
const interval = setInterval(() => {
var i;
for (i = 1; i < Table.rows.length; i++) {
// grabbing relevant info from DOM
var taskName = Table.rows[i].cells[0].innerText;
var rawDeadline = Table.rows[i].cells[1].innerText;
var rawStartTime = Table.rows[i].cells[2].innerText;
var bar = Table.rows[i].cells[6].getElementsByClassName("bar").item(0);
// calculations for progress bar
var now = new Date();
var startTime = new Date(rawStartTime.replace(/(am|pm)/, ''));
var deadline = new Date(rawDeadline.replace(/(am|pm)/, ''));
var timeTotal = Math.abs(deadline - startTime);
var timeTotalPercent = Math.abs(timeTotal / 60000);
var nowTillDeadline = Math.abs(deadline - now);
var nowTillDeadlinePercent = Math.abs(nowTillDeadline / 60000);
var timeElapsed = Math.abs(timeTotalPercent - nowTillDeadlinePercent);
var timeElapsedPercent = Math.abs((timeElapsed / timeTotalPercent) * 100);
// manipulating the necessary DOM element
bar.style.width = timeElapsedPercent + '%';
if (timeElapsedPercent >= 99) {
bar.style.width = '100%';
clearInterval(interval);
}
}
}, (1*1000))
}
So my problems were as follows:
1) The for-loop needs to be inside the interval, not the other way around. I read somewhere that an interval is basically just a timed for-loop. That was a light bulb moment for me.
2) Using .querySelector() to get the progress bar only gets the first one, even if it's in the for-loop; to get the progress bar for each row, the .getElementsByClassName() method was needed in addition to the .item() method with its index position, which you would never know from the error code you get if you leave it out. Since I only had one element within the cell to get, its index position is 0.
3) At the start of my for-loop, I changed from displayRows.length to Table.rows.length, but in order to do that, I had to change the way I defined var Table. Instead of .getElementsByTagName(), I used get .getElementById() -- for my fellow noobs, note it's just one Element, not Elements.
I think those were the three main issues. There were probably other minor issues, but I tried about 100 different things between now and when I first posted the problem, so it's hard to know.
I also made use of console.log at various points while I was troubleshooting everything. I deleted those lines here for the sake of code neatness, but they were immensely helpful.
Related
I have a timer I use to count how many masks are made in a production environment. I use a variable value that is user input when the page is started - it is called SAMS, basically how many masks 1 person can make in an hour would be what I would input depending on how many people I have working. IE. 2 people may be 18, 1 may be 9 etc. The problem I have with my current build is that I cannot change the SAMS value if I have someone leave for the day. So then what I use that value to calculate is off (I use it to show a GOAL value that increments based on the value).
Here is the relevant code for the processes I've described.
var SAMSINPUT = input;
console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
}
}, SAMSINPUT * 1000);
I also have START/STOP/RESET buttons on the page for the timer itself. I tried putting the SAMSINPUT input into the stop button, because if I could stop it, put in a new SAMSINPUT - and have the increment adjusted to the new value, that would solve this for me. However, that doesn't seem to change the actual value that SetInterval references, if I start with a 5, then change it to a 10 that way, it still increments at 5.
Would this work? Let me know if you have any problems/issues.
var SAMSINPUT = 1;
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
function doIncrement() {
goal += 1;
output2.innerHTML = goal.toString();
}
var inter = setInterval(doIncrement, SAMSINPUT * 1000);
function changeAmount() {
var newVal = document.getElementById('newval').value
clearInterval(inter);
var a = setInterval(doIncrement, newVal * 1000);
}
<div id='output'>
</div>
<div id='output2'>
</div>
<input type="number" id="newval">
<button onclick='changeAmount()'>new SAMSINPUT</button>
Hello why i try to coding something like a counter for bitcoin. this is the Code
result: <div id="counter"></div>
This is the Html
This is Javascript Code
var INTERVAL = 1; // in seconds
var INCREMENT = (0.00000001).toFixed(8); // increase per tick
var START_VALUE = (0.00000001).toFixed(8); // initial value when it's the start date
var count = 0;
$(document).ready(function() {
var msInterval = INTERVAL * 3000;
count = INCREMENT + START_VALUE;
document.getElementById('counter').innerHTML = count;
window.setInterval( function(){
count += INCREMENT;
document.getElementById('counter').innerHTML = count;
}, msInterval);
});
Heres the Output you can check
https://jsfiddle.net/8eqc2b3t/
Can anyone help
First of all, I've modified your code a little to make a bit more sense, you're using a few keywords that could be reserved within certain languages, so I'd avoid that in future ( like using count as a variable name )
var interval = 1; // in seconds
var increasePerTick = (0.00000001).toFixed(8); // increase per tick
var startingValue = (0.00000001).toFixed(8); // initial value
var $counter = $('#counter');
var btcAmount = 0.00000000;
$(document).ready(function() {
var msInterval = interval * 1000; // Convert to Milliseconds
$counter.text(startingValue); // Set initial amount
window.setInterval( function(){
btcAmount = (parseFloat(btcAmount)+parseFloat(increasePerTick)).toFixed(8);
$counter.text(btcAmount);
}, msInterval);
});
The main issue was that when you were using the + operand you were adding to the string rather than adding the two floats together. You'd also not added jQuery to your Fiddle, causing it not to work, I've fixed this and shown how to do the calculation here too, which basically is to parse both the floats, set them toFixed(8) and then print them to the counter.
The addition part is here:
btcAmount = (parseFloat(btcAmount)+parseFloat(increasePerTick)).toFixed(8);
You were also converting your msInterval incorrectly. Now seconds in interval should work out correctly when changed.
Hope this helps.
Edit:
Forgot to add the Fiddle, sorry! : https://jsfiddle.net/20Lppogq/
I am javascript learner struggling to design a small javascript game for my kids (5 to 10 years old) in which points are based on time elapsed. But, I cannot figure out a way to total the points. I have managed the code below but the result is not accurate. Probably the program is totalling all the items in array with each click. Can anybody help please? I am a newbie and there will be many mistakes or absurdities in here, I request you to be helpful politely while correcting me. Any help is appreciated..
document.getElementById("box1").onclick = function() {
clickT = Date.now();
reactT = (clickT - createdT) / 1000; //gets the time difference for reaction.
points = reactT * 1000;
points = 2000 - points;
pRecord.push(points); //add points to array.
for (i = 0; i < pRecord.length; i++) {
totalpoints += pRecord[i];
}
document.getElementById("time").innerHTML = reactT;
this.style.display = "none";
document.getElementById("score").innerHTML = totalpoints;
}
Just set totalpoints to zero before you sum the points:
document.getElementById("box1").onclick = function() {
var clickT = Date.now();
var reactT = (clickT - createdT) / 1000; //gets the time difference for reaction.
var points = reactT * 1000;
points = 2000 - points;
pRecord.push(points); //add points to array.
var totalpoints = 0;
for (var i = 0; i < pRecord.length; i++){
totalpoints += pRecord[i];
}
document.getElementById("time").innerHTML = reactT;
this.style.display = "none";
document.getElementById("score").innerHTML = totalpoints;
}
And also I don't know if you defined your variables in the outer scope, but I guess you did not, so I added var before every variable creation.
Here is an improved version of your code that also properly registers the reaction times, capping the maximum allowed reaction time to a configured value.
In your original implementation you could get bad readings if the reaction time was greater than 2 seconds.
Also, in your original code, you don`t need to divide by 1000 and then multiply back, since you end up with milliseconds anyway.
This is it:
document.getElementById("box1").addEventListener("click", function() {
clickT = Date.now();
// Gets the time difference in milliseconds for reaction.
reactT = clickT - createdT;
// Maximum allowed reaction time after which we give no more points.
var maxPoints = 2000;
// We cap the registered reaction time to the maximum allowed.
points = Math.max(reactT, maxPoints);
// We score the reaction time based
points = maxPoints - points;
// Add points to array.
pRecord.push(points);
// Compute the total points.
var totalpoints = 0;
for (i = 0; i < pRecord.length; i++){
totalpoints += pRecord[i];
}
document.getElementById("time").innerHTML = reactT;
this.style.display = "none";
document.getElementById("score").innerHTML = totalpoints;
}
You can notice that I have defined the totalpoints variable (and initialized it with 0), as otherwise, at each click, all your scores were re-added, not just the last one.
I have made the assumption that totalpoints was not already defined before the code you have pasted. Should this assumption be wrong and you have already initialized totalpoints before, in your code, then you need to replace the following piece from my code:
// Compute the total points.
var totalpoints = 0;
for (i = 0; i < pRecord.length; i++){
totalpoints += pRecord[i];
}
...with:
// Add the new points to the total.
totalpoints += points;
I have this counter JavaScript snippet:
var START_DATE = new Date("October 24, 2015 11:00:00"); // start
var INTERVAL = 1; // sec
var START_VALUE = 0; // init value
var INCREMENT = 0.13; // value per sec
var count = 0;
window.onload = function()
{
var msInterval = INTERVAL * 1000;
var now = new Date();
count = parseInt((now - START_DATE)/msInterval,10) * INCREMENT + START_VALUE;
document.getElementById('count').innerHTML = count.toFixed(2);
setInterval("count += INCREMENT; document.getElementById('count').innerHTML = count.toFixed(2);", msInterval);
}
The counter may eventually display values in thousands and millions. My question is how to separate the thousands with a comma/blank space? I tried to achieve this via CSS, but apparently the options available here are not very practical. I was wondering on a possible solution in JavaScript. I found this on jsfiddle, but I am not sure how to apply it on the result of the counter?
function addCommas(n){
var rx= /(\d+)(\d{3})/;
return String(n).replace(/^\d+/, function(w){
while(rx.test(w)){
w= w.replace(rx, '$1,$2');
}
return w;
});
}
You can use javascript's built in toLocaleString function. Here is an example from MDN
var number = 3500;
console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale
There are some additional options you can use with that function, but they are not all supported by various browsers. Basic use should work though.
I have a really simple JS counter which I display on a dashboard like screen which does the following:
Every 5 minutes it makes an jsonp call and retrieves a "total" number
It then displays this number to the screen by incrementing the last total displayed till it is equal to the new total. (the number can only ever increase)
I'm having some trouble with making the number increment smoothly. What I would like to do is find a delta (i.e. New total - old total) and increment the number gradually over the 5 minutes till the next call so it looks like a nice smooth transition.
Any ideas on how I can do this?
Currently some of my code looks like this (This block get's called every 5mins. And yes, it's in dire need of a refactor...)
var LAST_NUMBER_OF_SESSIONS = null;
var five_minutes_in_seconds = 300;
var new_number_of_sessions;
$.getJSON('http://blah.com/live_stats/default_jsonp.aspx?callback=?', function(data) {
if(LAST_NUMBER_OF_SESSIONS === null){
LAST_NUMBER_OF_SESSIONS = data.total_sessions;
}
new_number_of_sessions = data.total_sessions;
var delta = Math.floor(new_number_of_sessions - LAST_NUMBER_OF_SESSIONS);
var time_interval = (five_minutes_in_seconds / delta) * 1000;
var old_value = LAST_NUMBER_OF_SESSIONS;
var new_value = null;
sessions_interval = setInterval(function (){
new_value = parseInt(old_value, 10) + 1;
$('#stats').text(new_value);
old_value = new_value;
if(new_value >= new_number_of_sessions){
clearInterval(sessions_interval);
}
}, time_interval);
LAST_NUMBER_OF_SESSIONS = new_value;
});
}
This code it seems to increment the number very quickly at the start of the 5min period and then stop so it's not exactly right...
Try this:
var total = 0,
delta = 0,
stats = $('#stats').text( total );
function increment() {
var v = +stats.text();
if ( v < total ) {
stats.text( v + 1 );
} else {
$.getJSON('http://...', function(data) { // added data here
delta = Math.floor( 300000 / ( data.total_sessions - total ) );
total = data.total_sessions;
});
}
setTimeout(increment, delta);
}
Update:
In order to test my code, I had to simulate the JSON reponse - I used an array of numbers. See here: http://jsfiddle.net/simevidas/MwQKM/
(In the demo, I use an interval of 5 seconds instead of 5 minutes.)
I am not exactly sure why your code doesn't work as expected, although I suspect that it has to do with line LAST_NUMBER_OF_SESSIONS = new_value;. I wrote something similar and it works fine. It's not that different from what you have, minus that last line of code.