We Keep Coding

automatically clicking a button in javascript

I have this button:
<button class="btn btn-primary" type="button">Display</button>
and I'd like to click automatically that button every 100ms, I wrote this script but it doesnt work:
window.onload = function(){
var button=document.getElementsByClassName("btn btn-primary");
setInterval(function(){
button.click();
}, 100);
)

getElementsByClassName return a NodeList instead of an Element. Try to use querySelector
window.addEventListener('load', function () {
var button = document.querySelector(".btn.btn-primary");
setInterval(function () {
button.click();
}, 100);
});
If you want apply with all matched buttons, you can use querySelectorAll and [].slice.call to convert NodeList to Array
window.addEventListener('load', function () {
var buttonList = document.querySelectorAll(".btn.btn-primary");
var buttons = [].slice.call(buttonList);
setInterval(function () {
buttons.forEach(function (button) {
button.click();
});
}, 100);
});

For making a button click automatically, it is better to pass the function in setInterval Method.
setInterval(function(){
alert('Working fine'); //Same function as it was supposed on click
}, 5000);
To see the working model, I have attached a JS Fiddle to it.
https://jsfiddle.net/xrefwqcj/2/

Many selectors can yield multiple results, so you must specify an index to work with a selected element. If there is only one result the index will be [0].
window.onload = function(){
var button=document.getElementsByClassName('btn btn-primary')[0];
setInterval(function(){
button.click();
}, 100);
}
Also if this script runs before your button has loaded, the selector will not yield any results and could produce an error - here is one solution for that:
window.onload = function(){
setInterval(function(){
if (typeof document.getElementsByClassName('btn btn-primary')[0]!="undefined"){
document.getElementsByClassName('btn btn-primary')[0].click();
}
}, 100);
}
The above script will repeatedly check whether the selected element is defined before clicking it (then continue to do so indefinitely since you don't have any mechanism to toggle it off). You also had a ")" at the last line of your sample code which I think should have been a "}".

Jquery / JavaScript boostrap Switchery clearInterval doesn't work

I have a boostrap switchery on my site:
<div class="form-group">
<label class="checkbox-inline checkbox-right checkbox-switchery switchery-sm">
<input type="checkbox" class="switchery" id="test55">
Live
</label>
</div>
<div id="tableHolder"></div>
I want to achive this:
on page load load external page into "tableHolder" div.
Switchery is default turned off.
When you click on switchery, load the same external page, but with div resfresh every 5 seconds.
If you turn off switchery, show only loaded external page, without resfresh interval.
I'm having troubles, because everything works ok, but when i press switchery to off, the div still keeps refreshing, so clearInterval doesnt' work :(
Here is my script:
<script type="text/javascript">
$(document).ready(function () {
$('#tableHolder').load('external.php?name=myId001')
var documentInterval = 0;
$('#test55').change(function () {
if ($(this).prop("checked")) {
documentInterval = setInterval(function () {
$('#tableHolder').load('external.php?name=myId001')
}, 3000);
} else {
clearInterval(documentInterval)
}
});
});
</script>

Use click, not change function.
$(document).ready(function() {
$('#tableHolder').load('external.php?name=myId001');
var elem = document.querySelector('#test55');
var init = new Switchery(elem);
var documentInterval = 0;
var clickCheckbox = document.querySelector('#test55');
$(document).on('click', '#test55', function() {
if ($(this).prop("checked")) {
documentInterval = setInterval(function() {
$('#tableHolder').load('external.php?name=myId001');}, 3000);
} else {
clearInterval(documentInterval);
}
});
});
Sample fiddle here . This will append some text to the div as when switch is on and will stop appending when switch is turned off. If you change the 'click' event to 'change' event the text appending will continue even when the switch is off

How to get onclick event for jQuery Chosen drodpown listbox?

Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.

Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});

instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));

Registering jQuery click, first and second click

Is there a way to run two functions similar to this:
$('.myClass').click(
function() {
// First click
},
function() {
// Second click
}
);
I want to use a basic toggle event, but .toggle() has been deprecated.

Try this:
$('.myClass').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
} else {
// even clicks
}
$(this).data("clicks", !clicks);
});
This is based on an already answered question: Alternative to jQuery's .toggle() method that supports eventData?

Or this :
var clicks = 0;
$('.myClass').click(function() {
if (clicks == 0){
// first click
} else{
// second click
}
++clicks;
});

this I worked for my menu
var SubMenuH = $('.subBoxHederMenu').height();
var clicks = 0;
$('.btn-menu').click(function(){
if(clicks == 0){
$('.headerMenu').animate({height:SubMenuH});
clicks++;
console.log("abierto");
}else{
$('.headerMenu').animate({height:"55px"});
clicks--;
console.log("cerrado");
}
console.log(clicks);
});

i don't know what you are tryin to do but we can get basic toggle by
$('.myClass').click({
var $this=$(this);
if($this.is(':hidden'))
{
$this.show('slow');
}else{
$this.hide('slow');
}
})
note: this works for endless click event for that element .. not just for two clicks (if that is what you want)
OR you can use css class to hide/show the div and use jquery.toggleClass()

In the method mentioned below We are passing an array of functions to our custom .toggleClick() function. And We are using data-* attribute of HTML5 to store index of the function that will be executed in next iteration of click event handling process. This value, stored in data-index property, is updated in each iteration so that we can track the index of function to be executed in next iteration.
All of these functions will be executed one by one in each iteration of click event. For example in first iteration function at index[0] will be executed, in 2nd iteration function stored at index[1] will be executed and so on.
You can pass only 2 functions to this array in your case. But this method is not limited to only 2 functions. You can pass 3, 4, 5 or more functions in this array and they will be executed without making any changes in code.
Example in the snippet below is handling four functions. You can pass functions according to your own needs.
$.fn.toggleClick = function(funcArray) {
return this.click(function() {
var elem = $(this);
var index = elem.data('index') || 0;
funcArray[index]();
elem.data('index', (index + 1) % funcArray.length);
});
};
$('.btn').toggleClick([
function() {
alert('From Function 1');
}, function() {
alert('From Function 2');
}, function() {
alert('From Function 3');
}, function() {
alert('From Function 4');
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" class="btn">Click Me</button>
<button type="button" class="btn">Click Me</button>

If you literally only want the first and second click:
$('.myClass').one( 'click', function() {
// First click
$('.myClass').one( 'click', function() {
// Second click
});
);

var click_s=0;
$('#show_pass').click(function(){
if(click_s % 2 == 0){
$('#pwd').attr('type','text');
$(this).html('Hide');
}
else{
$('#pwd').attr('type','password');
$(this).html('Show');
}
click_s++;
});

When You click the selector it automatically triggers second and waiting for another click event.
$(selector).click(function(e){
e.preventDefault(); // prevent from Posting or page loading
//do your stuff for first click;
$(this).click(function(e){
e.preventDefault();// prevent from Posting or page loading
// do your stuff for second click;
});
});
I hope this was helpful to you..

I reach here looking for some answers, and thanks to you guys I´ve solved this in great manner I would like to share mi solution.
I only use addClass, removeClass and hasClass JQuery commands.
This is how I´ve done it and it works great:
$('.toggle').click(function() {
if($('.categ').hasClass("open")){
$('.categ').removeClass('open');
}
else{
$('.categ').addClass('open');
}
});
This way a class .open is added to the Html when you first clikc.
Second click checks if the class exists. If exists it removes it.

jQuery accordion plugin (like Facebook or Google)

I have seen many scripts for accordion on the internet, but haven't found anything which meets my needs. I want to make a plugin for accordion just like that which Facebook uses. It should work like this:
Click to open and close.
Add style class while open.
Close upon an outside click. It should not close when click event is inside the accordion box.
Is there any way to achieve this? Please help if you know. I am new to jQuery...
Thanks in advance.

No need for a plug-in when 15 lines of code will solve it: it's about changing the order of the click events that trigger on a specific DOM element and on the window using setTimeout.
var ShowingAccordion = false;
$(document).ready(function () {
$('.MyAccordionOpener').click(function () {
if ($(this).next('.MyAccordion').is(':visible') === false) {
ShowingAccordion = false;
$('.MyAccordion').hide(500);
$(this).next('.MyAccordion').addClass('SomeClass');
$(this).next('.MyAccordion').show(500);
setTimeout(function () { ShowingAccordion = true; }, 1);
}
});
$('.MyAccordion').click(function () {
ShowingAccordion = false;
//this is the line that solves your problem
setTimeout(function () { ShowingAccordion = true; }, 1);
});
$(document).click(function () {
if (ShowingAccordion === true) {
$('.MyAccordion').hide(500);
ShowingAccordion = false;
}
});
});
And here's the demo
If it does what you need then you can accept the answer and happy coding!