OK thanks all. The problem is solved after i see comment.
My countdown timer is not running.
<script type="text/javascript">
function timer(){
var count = document.getElementById("numb").value;
var counter=setInterval(timer, 1000);
var detik = count;
do {
count--;
document.getElementById("timer").innerHTML=count + " secs";
if (count<=0) {
count = detik+1;
}
} while (count===detik+1);
}
</script>
<input type="text" id="numb" name="numb" value=""></input>
<input type="button" value="click" onClick="timer();"/>
<span id="timer"></span>
There were some logic problem with your timer function. Check this fiddle.
HTML
<input type="text" id="url" name="url" value=""></input>
<input type="button" value="click" onClick="timer();" />
<span id="timer"></span>
JavaScript
function timer() {
clearInterval(counter);
var count = parseInt(document.getElementById("url").value);
document.getElementById("timer").innerHTML = count + " secs";
var counter = setInterval(function () {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML = count + " secs";
}, 1000);
};
There is a logical error in your code. Say, you gave 5 as input and clicked the button.
The count stores 5 and so is detik.
Inside the do-while loop, the count is decremented,(now 4). Then this is being displayed to the screen. The if condition isn't satisfied. But the do-while condition is also not true. Hence it comes out of the loop.
This whole process repeats again since you have setInterval for the function. On the whole you see the counter remaining the same.
What you need to do is this:
HTML:
<input type="text" id="numb" name="numb" value=""></input>
<input type="button" value="click" onClick="start_timer();"/>
<span id="timer"></span>
JS:
var count;
var intrv;
function start_timer(){
count = document.getElementById("numb").value;
count = parseInt(count);//convert to int..
intrv = setInterval(timer, 1000);
}
function timer(){
document.getElementById("timer").innerHTML = count + " secs";
count--;
if(count<0)
{
clearInterval(intrv);
}
}
JAVASCRIPT
var count = 0;
var inter;
function timer1(flag){
if(flag == 1)
{
count = document.getElementById("url").value;
console.log(count);
flag = 0;
}
count--;
document.getElementById("timer").innerHTML= count + " secs";
if(count<=0){
clearTimeout(inter);
}else{
inter = setTimeout(function(){timer1(0)},1000);
}
}
HTML
<input type="text" id="url" name="url" value="">
<input type="button" value="click" onclick="timer1(1);"/>
<div id="timer"></div>
I changed it like this and it works:
window.timer = function timer() {
var count = document.getElementById("numb").value;
var cTimer = document.getElementById("timer").innerHTML;
if(cTimer && !isNaN(parseInt(cTimer))) cTimer = parseInt(cTimer) - 1;
else cTimer = count;
if(cTimer==0) return;
document.getElementById("timer").innerHTML = cTimer + " secs";
setTimeout(timer, 1000);
}
and this your working DEMO.
Related
I have a question I have simple JavaScript that do some basic stuff to a number from input. I have a question how can I make variable that will always track the new input value for example if I enter 123 and click on some of the following buttons I get the result, but if I now enter new number for example 54321 and click again on some of the buttons I start from the previous value. How can I make my variable change every time a new value is entered or changed ? Here is my code:
var number = document.getElementById("number");
var numberValue = number.value;
console.log(numberValue);
function plus() {
number.value = ++numberValue;
}
function minus() {
number.value = --numberValue;
}
function flip() {
var temp = numberValue;
var cifra, prevrten = 0;
while (temp > 0) {
cifra = temp % 10;
prevrten = (prevrten * 10) + cifra;
temp = temp / 10 | 0;
}
number.value = prevrten;
}
window.onload = function() {
number.value = "";
}
<div>
<input type="text" id="number" id="output" onload="restart();">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
I suggest you use a type="number" and case the value to number - her I use the unary plus to do so
You will need to read the value in all functions
let numberValue = 0;
function store() {}
function check() {}
function plus() {
numberValue = +number.value;
number.value = ++numberValue;
}
function minus() {
numberValue = +number.value;
number.value = --numberValue;
}
function flip() {
let numberValue = +number.value;
var cifra, prevrten = 0;
while (numberValue > 0) {
cifra = numberValue % 10;
prevrten = (prevrten * 10) + cifra;
numberValue = numberValue / 10 | 0;
}
number.value = prevrten;
}
window.addEventListener("load", function() {
let number = document.getElementById("number");
number.value = 0;
})
<div>
<input type="number" id="number" id="output" onload="restart();">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
Try using onChange="".
<input type="text" id="number" id="output" onload="restart();" onChange="updateVal();">
function updateVal() {
numberValue = number.value;
}
I would suggest, for something like this, it would be much easier to use React JS or another framework with state.
I have made a countdown with password protection. So this is my code
var myTimer;
function clock() {
myTimer = setInterval(myClock, 1000);
var c = 180;
var pass1 = 12;
var input = document.getElementById("userInput").value;
function myClock() {
if (input==pass1){
document.getElementById("demo").innerHTML = --c;
if (c == 0) {
clearInterval(myTimer);
alert("Reached zero");
}
}
}
}
<p id="demo">180</p>
<form id="form" onsubmit="return false;">
<input type="password" id="userInput" />
<br/>
<input type="submit" onclick="clock()" value="Start"/>
<button onclick="clearInterval(myTimer)">Stop counter</button>
</form>
And this is the result.
But i dont like like that. I want to change into minutes. So 180 will be 3 minutes 0 seconds. And still countdown until 0 minute 0 second. How to change it?
This can be achieved by small modifications in existing code. You need to calculate mins and remaining seconds from seconds. Refer following code sample.
const mins = Math.floor(c / 60);
const remainingSecs = c % 60;
Integrating everything:
var myTimer;
function clock() {
myTimer = setInterval(myClock, 1000);
var c = 180;
var pass1 = 12;
var input = document.getElementById("userInput").value;
function myClock() {
if (input == pass1) {
c = parseInt(c);
if (!isNaN(c) || c > 0) {
c--;
const mins = String(Math.floor(c / 60)).padStart(2, '0');
const remainingSecs = String(c % 60).padStart(2, '0');
document.getElementById("demo").innerHTML = `${mins}:${remainingSecs}`;
if (c === 0) {
clearInterval(myTimer);
alert("Reached zero");
}
}
}
}
}
<p id="demo">Timer will appear here</p>
<form id="form" onsubmit="return false;">
<input type="password" id="userInput" />
<br />
<input type="submit" onclick="clock()" value="Start" />
<button onclick="clearInterval(myTimer)">Stop counter</button>
</form>
String.prototype.padStart()
I am trying to set a decrementing timer when a user inputs something in an input. However, I am struggling to get it to properly work, when a user writes something new it restarts.
I thought .one would take care of this but apparently not.
function myTimer() {
var counter = 15;
var x = window.setInterval(function() {
counter--;
if (counter >= 0) {
span = document.getElementById("timer");
span.innerHTML = counter;
}
if (counter === 0) {
span.innerHTML = "OUT OF TIME";
window.clearInterval(x);
}
}, 1000);
}
$("#wrapper input").one("change paste keyup", myTimer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="timer">15</span><br>
<div id="wrapper">
<input class="something" type="text"><br>
<input class="somethingelse" type="text">
</div>
jsFiddle
Move the counter and test the tId:
var counter = 15, x, span = document.getElementById("timer");
function myTimer() {
if (!x) x = window.setInterval(function() {
if (counter === 0) window.clearInterval(x);
counter--;
span.innerHTML = counter >= 0 ? counter : "OUT OF TIME"
}, 1000);
}
$("#wrapper input").one("change paste keyup", myTimer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="timer">15</span><br>
<div id="wrapper">
<input class="something" type="text"><br>
<input class="somethingelse" type="text">
</div>
You need a global bool variable isCounterRunning. On first line of your function check its value, if it's true return out the function before doing anything, and if it's false, set it to true and then do the rest of the code in your function.
var isCounterOn = false
function myTimer() {
if(isCounterOn) return;
else{
isCounterOn = true
var counter = 15;
var x = window.setInterval(function() {
counter--;
if (counter >= 0) {
span = document.getElementById("timer");
span.innerHTML = counter;
}
if (counter === 0) {
span.innerHTML = "OUT OF TIME";
window.clearInterval(x);
}
}, 1000);
}
}
$("#wrapper input").one("change paste keyup", myTimer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="timer">15</span><br>
<div id="wrapper">
<input class="something" type="text"><br>
<input class="somethingelse" type="text">
</div>
you have to initialize x outside startInterval so it can be overwritten subsequentially. Moreover, one() will do, as the name says, only one event trigger. If you want to catch everytime an event happens, use on()
var counter = 15;
var x = 0;
var span = document.getElementById("timer");
function myTimer() {
window.clearInterval(x);
startInterval();
}
function startInterval() {
counter = 15;
span.innerHTML = counter;
x = setInterval(function() {
counter--;
if (counter >= 0) {
span.innerHTML = counter;
}
if (counter === 0) {
span.innerHTML = "OUT OF TIME";
window.clearInterval(x);
}
}, 1000);
}
$("#wrapper input").on("change paste keyup", myTimer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="timer">15</span><br>
<div id="wrapper">
<input class="something" type="text"><br>
<input class="somethingelse" type="text">
</div>
I need help,
How to put Stop and Reset button in html and javascript
Here my countdown javascript and html code and also put chrome notifications with sound,
sounds loop notify me left 10 Seconds after countdown then 0 notify me in chrome notification, and also show countdown value in page title
function do_countdown() {
var start_num = document.getElementById("value").value;
var unit_var = document.getElementById("countdown_unit").value;
start_num = start_num * parseInt(unit_var);
var countdown_output = document.getElementById('countdown_div');
if (start_num > 0) {
countdown_output.innerHTML = format_as_time(start_num);
var t=setTimeout("update_clock(\"countdown_div\", "+start_num+")", 1000);
}
return false;
}
function update_clock(countdown_div, new_value) {
var countdown_output = document.getElementById(countdown_div);
var new_value = new_value - 1;
if (new_value > 0) {
new_formatted_value = format_as_time(new_value);
countdown_output.innerHTML = new_formatted_value;
var t=setTimeout("update_clock(\"countdown_div\", "+new_value+")", 1000);
} else {
countdown_output.innerHTML = "Time's UP!";
}
}
function format_as_time(seconds) {
var minutes = parseInt(seconds/60);
var seconds = seconds - (minutes*60);
if (minutes < 10) {
minutes = "0"+minutes;
}
if (seconds < 10) {
seconds = "0"+seconds;
}
var return_var = minutes+':'+seconds;
return return_var;
}
And also html
<form id="countdown_form" onSubmit="return do_countdown();">
Countdown from: <input type="text" style="width: 30px" id="value" value="10" text-align="center"/>
<select id="countdown_unit">
<option value="1">Seconds</option>
<option value="60">Minutes</option>
<option value="3600">Hours</option>
</select>
<input type="submit" value="Start" />
<!--<input type="button" value="Reset" id="reset">-->
</form>
<div id="countdown_div"> </div>
javascript
changes
1.taken window variables t1,t2 where the timers are going to be assigned
2.added a button(name:reset),which on click calls doReset function
3.added doStuff function
window.t1=null;
window.t2=null;
function do_countdown() {
var start_num = document.getElementById("value").value;
var unit_var = document.getElementById("countdown_unit").value;
start_num = start_num * parseInt(unit_var);
var countdown_output = document.getElementById('countdown_div');
if (start_num > 0) {
countdown_output.innerHTML = format_as_time(start_num);
window.t1=setTimeout("update_clock(\"countdown_div\", "+start_num+")", 1000);
}
return false;
}
function update_clock(countdown_div, new_value) {
var countdown_output = document.getElementById(countdown_div);
var new_value = new_value - 1;
if (new_value > 0) {
new_formatted_value = format_as_time(new_value);
countdown_output.innerHTML = new_formatted_value;
window.t2=setTimeout("update_clock(\"countdown_div\", "+new_value+")", 1000);
} else {
countdown_output.innerHTML = "Time's UP!";
}
}
function format_as_time(seconds) {
var minutes = parseInt(seconds/60);
var seconds = seconds - (minutes*60);
if (minutes < 10) {
minutes = "0"+minutes;
}
if (seconds < 10) {
seconds = "0"+seconds;
}
var return_var = minutes+':'+seconds;
return return_var;
}
function doReset(){
window.clearTimeout(window.t1);
window.clearTimeout(window.t2);
document.getElementById('countdown_div').innerHTML="";
}
HTML
<form id="countdown_form" onSubmit="return do_countdown();">
Countdown from: <input type="text" style="width: 30px" id="value" value="10" text-align="center"/>
<select id="countdown_unit">
<option value="1">Seconds</option>
<option value="60">Minutes</option>
<option value="3600">Hours</option>
</select>
<input type="submit" value="Start" />
<input type="button" onClick="return doReset();" value="Reset" id="reset">
</form>
<div id="countdown_div"> </div>
Use the reset attribute in your form to clear the form input values
<input type="reset"value="Reset">
Take a look here http://jsfiddle.net/05y89wn3/14/
you have to clear the timeout ,reset the form and change the html value of the countdown_div
var reset = document.getElementById("reset_button");
var t;
reset.onclick = function() {
clearTimeout(t);
document.getElementById("countdown_form").reset();
document.getElementById("countdown_div").innerHTML="";
}
I want to dynamically add and remove input files, my code works great on all browsers without Internet Explorer. Can anyone help me to resolve my problem?
Here is the Javascript:
<script>
var counter = 1;
var min = 1;
var max = 20;
function addInput(divName) {
if (counter == max) {
alert("Max limit!");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = '<input type="file" name="file[]" id="file"><br>';
document.getElementById(divName).appendChild(newdiv);
document.getElementById("qty").value++;
counter++;
}
}
function remInput(divName) {
if (counter == min) {
alert("Min limit!");
}
else {
var element = document.getElementById(divName);
element.lastChild.remove();
document.getElementById("qty").value--;
counter--;
}
}
</script>
And here is the HTML code:
<input type="button" value="-" onClick="remInput('plus');">
<input type="text" name="qty" id='qty' size='2' style="text-align: center" disabled value="1">
<input type="button" value="+" onClick="addInput('plus');">
<div id="plus">
<input type="file" name="file[]" id="file"><br>
</div>
Thank you.
Its seems that remove() is not supported in IE, do add condition in your code, if particular function is supported in your browser(in this case remove() function)
Please refer below working add.
<script>
var counter = 1;
var min = 1;
var max = 20;
function addInput(divName) {
if (counter == max) {
alert("Max limit!");
}
else {
var newdiv = document.createElement('div');
var inputid="file"+counter;
newdiv.innerHTML = '<input type="file" name="file[]" id='+inputid+'><br>';
document.getElementById(divName).appendChild(newdiv);
document.getElementById("qty").value++;
counter++;
}
}
function remInput(divName) {
if (counter == min) {
alert("Min limit!");
}
else {
var element = document.getElementById(divName);
if(element.lastChild.remove!= undefined)
element.lastChild.remove();
else
element.lastChild.parentNode.removeChild(element.lastChild);
document.getElementById("qty").value--;
counter--;
}
}
</script>