Question

In: Computer Science

Why does the percent go beyond 100% using the progressbar? **************************************** timer.js ************************************** var timer =...

Why does the percent go beyond 100% using the progressbar?

****************************************

timer.js

**************************************

var timer = undefined;
$(document).ready(function() {
    $("#start_timer").click(
       function () {
         var totalTime = $("#time").val();
         var interval = $("#interval").val();
         var isValid = true;
       
         // validate the time
         if (totalTime == "") {
            $("#time_error").text("This field is required.");
            isValid = false;
         } else if (isNaN(totalTime)) {
            $("#time_error").text("Time must be a number.");
            isValid = false;
         } else {
            $("#time_error").text("");
         }
       
         // validate the interval
         if (interval == "") {
            $("#interval_error").text("This field is required.");
            isValid = false;
         } else if (isNaN(interval)) {
            $("#interval_error").text("Interval must be a number.");
            isValid = false;
         } else {
            $("#interval_error").text("");
         }
       
         if (isValid) {
                         console.log('Valid. Hence starting');
            totalTime = totalTime * 1000;
            interval = interval * 1000;
                      
            var elapsedTime = 0;
                                              
                        var progressbar = $( "#progressbar" );
                        var progressLabel = $( ".progress-label" );
                      
                        progressbar.progressbar({
                                value: 0,
                                max: 100
                        });
                      
                        function progress() {
                                elapsedTime += interval;

                                var perc = 100.0 * elapsedTime/totalTime;
                                console.log('making progress ' + perc)
                                progressLabel.text(perc.toFixed(0) + '%');
                              
                                if(perc > 100) {
                                        perc = 100;
                                        progressbar.progressbar( "value", perc );
                                        $("#start_timer").removeAttr('disabled');
                                } else {
                                        progressbar.progressbar( "value", perc );
                                        setTimeout(progress, interval);
                                }
                        }

                        progressLabel.text('0%');
                        setTimeout( progress, interval);
                        $("#start_timer").attr('disabled','disabled');
          }
       }
    );
   $("#totalTime").focus();
});

Solutions

Expert Solution

Your code is working perfectly dear. But you have left two things. I have modifyied them. :)

  1. Check the value of 'perc' is greater than or equal to (>=) 100 instead of checking only greater than 100. Because your code will call the function again even if it reaches 100%.
  2. In the above checking condition, you are only updating the progressbar value, but not updating the text value in progress-label. That's why even if you change the value of 'perc', it is not showing in the page.

Here is the modified and perfectly working code for your jQuery progressbar.

jQuery progressbar.html

<!DOCTYPE html>
<html>
<head>
        <title>Progress Bar</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="jquery-3.5.1.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <style type="text/css">
                input{
                        padding: 10px;
                        border: 1px solid gray;
                        font-size: 15px;
                }
        </style>
</head>
<body>

<div>
        <form>
                <input id="time" type="text" placeholder="time">
                <p id="time_error"></p>

                <input id="interval" type="text" placeholder="interval">
                <p id="interval_error"></p>

                <input type="button" value="start" id="start_timer">
        </form>
        <br><br>
        <div id="progressbar"></div>
        <div class="progress-label"></div>
</div>

<script type="text/javascript">
        var timer = undefined;
        $(document).ready(function() {
            $("#start_timer").click(
               function () {
                 var totalTime = $("#time").val();
                 var interval = $("#interval").val();
                 var isValid = true;
               
                 // validate the time
                 if (totalTime == "") {
                    $("#time_error").text("This field is required.");
                    isValid = false;
                 } else if (isNaN(totalTime)) {
                    $("#time_error").text("Time must be a number.");
                    isValid = false;
                 } else {
                    $("#time_error").text("");
                 }
               
                 // validate the interval
                 if (interval == "") {
                    $("#interval_error").text("This field is required.");
                    isValid = false;
                 } else if (isNaN(interval)) {
                    $("#interval_error").text("Interval must be a number.");
                    isValid = false;
                 } else {
                    $("#interval_error").text("");
                 }
               
                 if (isValid) {
                                 console.log('Valid. Hence starting');
                    totalTime = totalTime * 1000;
                    interval = interval * 1000;
                              
                    var elapsedTime = 0;
                                                      
                                var progressbar = $( "#progressbar" );
                                var progressLabel = $( ".progress-label" );
                              
                                progressbar.progressbar({
                                        value: 0,
                                        max: 100
                                });
                              
                                function progress() {
                                        elapsedTime += interval;

                                        var perc = 100.0 * elapsedTime/totalTime;
                                        console.log('making progress ' + perc)
                                        progressLabel.text(perc.toFixed(0) + '%');
                                        //check the perc value is greater than or equal to 100
                                        if(perc >= 100) {
                                                perc = 100;
                                                progressbar.progressbar( "value", perc );
                                                $("#start_timer").removeAttr('disabled');
                                                //display the updated value of perc in progressLabel
                                                progressLabel.text(perc.toFixed(0) + '%');
                                        } else {
                                                progressbar.progressbar( "value", perc );
                                                setTimeout(progress, interval);
                                        }
                                }

                                progressLabel.text('0%');
                                setTimeout( progress, interval);
                                $("#start_timer").attr('disabled','disabled');
                  }
               }
            );
           $("#totalTime").focus();
        });
</script>

</body>
</html>

Output:

--------------------------------------

jQuery code only: (timer.js)

var timer = undefined;
$(document).ready(function() {
    $("#start_timer").click(
       function () {
         var totalTime = $("#time").val();
         var interval = $("#interval").val();
         var isValid = true;
       
         // validate the time
         if (totalTime == "") {
            $("#time_error").text("This field is required.");
            isValid = false;
         } else if (isNaN(totalTime)) {
            $("#time_error").text("Time must be a number.");
            isValid = false;
         } else {
            $("#time_error").text("");
         }
       
         // validate the interval
         if (interval == "") {
            $("#interval_error").text("This field is required.");
            isValid = false;
         } else if (isNaN(interval)) {
            $("#interval_error").text("Interval must be a number.");
            isValid = false;
         } else {
            $("#interval_error").text("");
         }
       
         if (isValid) {
                         console.log('Valid. Hence starting');
            totalTime = totalTime * 1000;
            interval = interval * 1000;
                      
            var elapsedTime = 0;
                                              
                        var progressbar = $( "#progressbar" );
                        var progressLabel = $( ".progress-label" );
                      
                        progressbar.progressbar({
                                value: 0,
                                max: 100
                        });
                      
                        function progress() {
                                elapsedTime += interval;

                                var perc = 100.0 * elapsedTime/totalTime;
                                console.log('making progress ' + perc)
                                progressLabel.text(perc.toFixed(0) + '%');
                                //check the perc value is greater than or equal to 100
                                if(perc >= 100) {
                                        perc = 100;
                                        progressbar.progressbar( "value", perc );
                                        $("#start_timer").removeAttr('disabled');
                                        //display the updated value of perc in progressLabel
                                        progressLabel.text(perc.toFixed(0) + '%');
                                } else {
                                        progressbar.progressbar( "value", perc );
                                        setTimeout(progress, interval);
                                }
                        }

                        progressLabel.text('0%');
                        setTimeout( progress, interval);
                        $("#start_timer").attr('disabled','disabled');
          }
       }
    );
   $("#totalTime").focus();
});

Hope you like it.

If you have any doubts ask me in comment section.

If you like my work, please give me a like and feedback. That helps me a lot. Thank you.

All the best.

venereology answered 9 months ago
Next > < Previous

Related Solutions

Why is it important for companies to go beyond financial and accounting data in accessing their...
Why is it important for companies to go beyond financial and accounting data in accessing their performance?
Question: Explain why VaR is not a coherent measure. Which property does VaR not satisfy? Provide...
Question: Explain why VaR is not a coherent measure. Which property does VaR not satisfy? Provide an example to show how VaR fails to satisfy this property.
Why do firms go global (beyond the obvious reason of reaching more customers)? How do companies...
Why do firms go global (beyond the obvious reason of reaching more customers)? How do companies invest abroad? In your own words or experiences provide an overview of the different modes of foreign investment.
How would you inspire members to go beyond “shallow sharing”?
How would you inspire members to go beyond “shallow sharing”?
1. Whistleblower is : Which one and Explain A. employees of an organization that go beyond...
1. Whistleblower is : Which one and Explain A. employees of an organization that go beyond their duties and expectation in order to highlight wrong within the organization or B. employees go beyond normal procedure& loyalty to their employer and report wrong doing in the intrest of the public .
Suppose that we back-test a VaR model using 300 days of data. The VaR confidence level...
Suppose that we back-test a VaR model using 300 days of data. The VaR confidence level is 99% and we observe 10 exceptions. Do we reject the model?
This is a atmega128 source to make a clock using the timer interrupt. I want to...
This is a atmega128 source to make a clock using the timer interrupt. I want to add source if i press switch (PIND==0x0FE&&PIND==0x0FD) then below program would be running . #include<io.h> int position=0,BJT[4]={0xFE,0xFD,0xFB,0xF7}; int number=0,segment[10]={0xC0,0xF9,0xA4,0xB0,0x99,0x92,0x82,0xF8,0x80,0x90}; int msec=0, sec=0, min=0; void main() { DDRA=0xFF; PORTA=0XFF; DDRB=0xFF; PORTB=0xFF; TCCR0=0x04; TIMSK=0x01; SREG=0x80; while(1){} } interrupt[TIM0_OVF]void timer0_ovf_isr() { TCNT0=0x06; PORTA=BJT[position]; if(position==0)number=sec%10; if(position==1)number=sec/10; if(position==2)number=min%10; if(postion==3)number=min/10; PORTB=segment[number]; position++; if(position>3)position=0; msec++; if(msec==1000) { msec=0; sec++; } if(sec==60) { sec=0; min++; } if(min==60)min=0; }
This task will go beyond the traditional idea to measure central tendency where a set of...
This task will go beyond the traditional idea to measure central tendency where a set of data is given and usually has been asked to compute mean. median or mode. The task will give you five questions and will ask to use analytical mind to provide solution. 1) A sequence consists of 7 terms arranged in descending order. The mean value of the sequence is 70. If 30 is added to each term, and then each term is divided by...
Why does the economy always go against equilibrium in the Solow model?
Why does the economy always go against equilibrium in the Solow model?
write a program for the msp430fr6989 Using the general purpose timer, specifically the ACLK, create a...
write a program for the msp430fr6989 Using the general purpose timer, specifically the ACLK, create a program which makes LED1 stay on for 4 seconds and off for 2 seconds and repeat indefinitely. Modify the above program to extend the timing to 20 and 10 seconds, respectively.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT