My Code
window.onload = function(){
setInterval(function(){
if (typeof document.getElementsByClassName('btn-primary')[0]!="undefined"){
document.getElementsByClassName('btn-primary')[0].click();
}
}, 1000);
}
<button type="button" class="btn-primary" >Auto click</button>
i want to click button as class="btn-primary" only 10 time. but i won't find the code for it. my code repeats clicking every 1s.
Now my question is, how can i click the button only 10 times?
If you are using setInterval function, that function will trigger each time on the specified interval, you have to use clearInterval once the limit is reached.
function clickme() {
console.log('You clicked me');
}
let intervalFunction;
let count = 0;
window.onload = function () {
intervalFunction = setInterval(function () {
if (typeof document.getElementsByClassName('btn-primary')[0] != "undefined") {
document.getElementsByClassName('btn-primary')[0].click();
count++;
if (count === 10) {
console.log("Now you have clicked me 10 times!! let me take a break")
clearInterval(intervalFunction)
}
}
}, 1000);
}
<button class="btn-primary" onclick="clickme()">Click me</button>
If you dont need to have the interval between each click, you can direcly click it with a loop.
Example
function clickme() {
console.log('You clicked me');
}
let intervalFunction;
let count = 0;
window.onload = function () {
while(count < 10) {
if (typeof document.getElementsByClassName('btn-primary')[0] != "undefined") {
document.getElementsByClassName('btn-primary')[0].click();
count++;
}
}
}
<button class="btn-primary" onclick="clickme()">Click me</button>
Related
I'm currently making a clicker game and I wanted to know how to make a button that when I click on it, a number slowly goes up with intervals. I don't really know how to do the intervals and I've tried doing loops but loops are instant and have no intervals.
var number = 0;
function increase() {
for (var i = 0; i < 1; i++) {
document.getElementById("number").innerHTML = number += 1
}
}
<button onclick="increase()">
by 1
</button>
<div>
number:
<div id="number">
0
</div>
</div>
Can someone turn this into an auto clicker? as said above, i just want to click on the button once and have the value of the variable "number" go up. Thanks.
Here is mine showing how to
use an interval
use eventListener (unobtrusive coding)
clear the interval
how to increment a number and change speed
how to use data attributes
how to use classes and querySelector
var number = 0,
increment = 1,
speed=1000, // one second
tId;
function inc() {
clearInterval(tId); // stop anything already running
tId = setInterval(function() {
document.getElementById("number").innerHTML = number += increment;
}, speed);
}
function changeSpeed() {
speed = +this.getAttribute("data-speed"); // get attribute and convert to number
inc();
}
window.addEventListener("load", function() { // when page has loaded
document.querySelectorAll(".start").forEach(function(but) {
but.addEventListener("click", function() {
increment = +this.getAttribute("data-inc") ; // get from button and convert to number
inc()
});
});
document.getElementById("stop").addEventListener("click", function() { // when clicking
clearInterval(tId);
});
document.querySelectorAll(".speed").forEach(function(but) {
but.addEventListener("click", changeSpeed);
});
});
<button type="button" class="start" data-inc="1">By 1</button>
<button type="button" class="start" data-inc="10">By 10</button>
<button type="button" class="speed" data-speed="1000">One a sec</button>
<button type="button" class="speed" data-speed="500">Two a sec</button>
<button type="button" id="stop">Stop</button>
<div>
number: <span id="number">0</span>
</div>
function increase() {
setInterval(() => document.getElementById("number").innerHTML = number += 1, 1000)
}
setInterval() will call an anonymous function which increment the number each second (1000 ms) until you call clearInterval()
var number = 0;
function increase () {
number++;
document.getElementById('number').innerHTML = number;
}
Try this out.
I believe the issue is, you're not actually incrementing the variable 'number'. What you're instead doing is setting the content of the element number to number +=1;
So since number is 0;
it will only ever show 1 on the HTML.
If you want the number to increment by one automatically after you've clicked the button once. Create a setInterval.
setInterval(() => {
increase()
}, 5000) // increase every 5 seconds
You can set an interval with setInterval();
var number = 0;
function increase() {
for (var i = 0; i < 1; i++) {
document.getElementById("number").innerHTML = number += 1
}
}
setInterval(increase, 1000);
This should increase the number every second.
If you want to stop it then you can say:
var interval = setInterval(increase, 1000);
clearInterval(interval);
var number = 0;
function increase() {
for (var i = 0; i < 1; i++) {
document.getElementById("number").innerHTML = number += 1
}
}
<button onclick="increase()">
by 1
</button>
<div>
number:
<div id="number">
0
</div>
</div>
var number = 0,
increment = 1,
speed=1000, // one second
tId;
function inc() {
clearInterval(tId); // stop anything already running
tId = setInterval(function() {
document.getElementById("number").innerHTML = number += increment;
}, speed);
}
function changeSpeed() {
speed = +this.getAttribute("data-speed"); // get attribute and convert to number
inc();
}
window.addEventListener("load", function() { // when page has loaded
document.querySelectorAll(".start").forEach(function(but) {
but.addEventListener("click", function() {
increment = +this.getAttribute("data-inc") ; // get from button and convert to number
inc()
});
});
document.getElementById("stop").addEventListener("click", function() { // when clicking
clearInterval(tId);
});
document.querySelectorAll(".speed").forEach(function(but) {
but.addEventListener("click", changeSpeed);
});
});
<button type="button" class="start" data-inc="1">By 1</button>
<button type="button" class="start" data-inc="10">By 10</button>
<button type="button" class="speed" data-speed="1000">One a sec</button>
<button type="button" class="speed" data-speed="500">Two a sec</button>
<button type="button" id="stop">Stop</button>
<div>
number: <span id="number">0</span>
</div>
You can use setInterval(function(){ /* do something every 3 seconds */ }, 3000);
You can call the function in the interval parameter or write the code inside.
You can look at these examples.
I got this interval function which adds + 1 every second to this element, and a button which stops it with clearInterval(), but i want to "stop" and "resume" the interval instead of "clear" and restarting it. For example if the interval was stopped with 700 miliseconds, so i want to resume it for runnig from these 700 miliseconds and not from 0.
How can i do that?.
var testingB = $('#testing');
var testingBox = $('.text3');
var counter = 0;
var checker = null;
setInterval( function () { testingBox.text(counter); },1);
var id = setInterval( function () { counter++; },1000);
function adder() {
if (checker === null ) {
clearInterval (id);
checker = true;
testingB.text('Keep Counting');
}
else {
id = setInterval( function () { counter++; },1000);
checker = null;
testingB.text('Stop Couting');
};
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="testing" onclick="adder()"> Stop Counting </button>
<p class="text3"> </p>
I have a counter which is activated once startnew button is clicked:
<button id="startnew" onclick="counter()">Start new Game</button>
var i = 0;
function counter() {
var execution = setInterval(function(){
active()
}, 1000);
function active() {
i++;
document.getElementById("timer").innerHTML = i;
}
}
The problem comes when I click on the startnew button for the second time, where counter starts to speed up as an inner variable stays the same.
I have tried adding additional if clauses in different parts of a code which would check if a button was already clicked but had no success so far.
How can I reset an inner variable once the same button was clicked for a second time?
You are creating a new setInterval everytime you click the button.
Call clearInterval(execution) before setInterval and make var execution global. Also Declare your variable i inside the function counter.
var execution;
function counter() {
var i = 0;
clearInterval(execution);
execution = setInterval(function() {
active()
}, 1000);
function active() {
i++;
document.getElementById("timer").innerHTML = i;
}
}
<button id="startnew" onclick="counter()">Start new Game</button>
<br>
<span id="timer"></span>
I hope i understood your Requirement...
Make the variable execution in Global Scope
var i = 0;
var execution;
function counter() {
if (i === 0) {
execution = setInterval(function() {
active()
}, 1000);
} else {
clearInterval(execution);
i = 0;
document.getElementById("timer").innerHTML = '';
}
function active() {
i++;
document.getElementById("timer").innerHTML = i;
}
}
<button id="startnew" onclick="counter()">Start new Game</button>
<span id='timer'></span>
i would like to ask all , i am face with issue that i want to blink three html links when user clicks on the button with specific time
<a id="tip1">blink1</a>
<a id="tip2">blink2</a>
<a id="tip3">blink3</a>
<input type="button" value="CLICK ME" id="btn" />
$("#btn").click(function () {
doBlink(900);
});
function doBlink(900)
{
set blink for $("#tip1") is 300, after finishing for blinking one, we will call for blink2..etc..
}
Thanks in advance
Here is a Fiddle Demo that will do this:
$("#btn").click(function () {
doBlink(900);
});
function doBlink(value) {
var time = value/3;
blink(1, time);
}
function blink(id, time) {
var counter = 0;
var interval = setInterval(function () {
$("#tip" + id).toggleClass('blinked');
counter += 50;
if (counter >= time && id < 4) {
clearInterval(interval);
id++;
blink(id, time);
}
}, 100);
}
<!DOCTYPE html>
<html>
<head>
<script>
function timer(x) {
if (x == 1) {
//reset timer
}
var i = 0;
var timer = setInterval(function() {
var x = document.getElementById("demo").innerHTML = i;
i = i + 1;
}, 500);
}
</script>
</head>
<body>
<p id="demo">hello</p>
<button type="button" onclick="timer(0)">change</button>
<button type="button" onclick="timer(1)">reset</button>
</body>
</html>
I want to reset timer onclick . e.g. if setIntervaltime is set to 5 sec and 3 seconds are elapsed ,after that if some on click on reset button it should start gain from 5 seconds.How to do this.
Keep the return value of setTimeout somewhere that you can get it again (currently you are storing it in a local variable, so it goes away when the function ends)
Call clearTimeout(timer);
Call setTimeout with whatever arguments you want again.
As already Quentin mentioned, use clearInterval to solve your problem.
Wrap it within an if.else.. statement like
if(x == 1) {
clearTimeout(timeout);
}
else {
timeout = setInterval..... // otherwise even after resetting
// it will continue to increment the value
}
Complete Code:
var timeout; // has to be a global variable
function timer(x) {
var i = 0;
if (x == 1) {
clearTimeout(timeout);
document.getElementById("demo").innerHTML = i;
} else {
timeout = setInterval(function () {
var x = document.getElementById("demo").innerHTML = i;
i = i + 1;
}, 1000);
}
}
JSFiddle