We Keep Coding

Click on div with javascript or jquery

I have a clickable div and I want to some how with javascript or jquery to be able to click on it automatically.
My div is like this:
<div style="display:none;" id="button">Hello</div>
That is click able div when display changed to block I need some script to do that for me.
I need some script like, when it sees that div display changed to block then script must click on div id="button"
I have tried this but this is not for that as I searched on google
<script type="text/javascript">
$(document).ready(function(){
$('#button').trigger('click');
});
</script >

Here is an example in JS:
<div style="display:none;" id="button">Hello</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('button');
button.addEventListener('click', function() {
this.style.display = 'block';
})
if (button.style.display === 'block') {
button.click()
}
});
</script >
Update:
If you need to click on button after some javascript actions, just add there following lines:
if (button.style.display === 'block') {
button.click()
}
Update2:
In the provided page I found the method to show mentioned div:
function startChecking() {
secondsleft -= 1e3,
document.querySelector(".load_stream").innerHTML = "Please Wait.. " + Math.abs(secondsleft / 1e3) + " Seconds",
0 == secondsleft && (clearInterval(interval),
$(".reloadframe").show(),
document.querySelector(".load_stream").style.display = "none",
$("#btn_play_s").show()
//You need to place it here, after "show" div will be displayed
// and display will have value "block"
)
}
So you can replace last line with $('#btn_play_s').show().click() instead of $('#btn_play_s').show(), it will be enough.

Simply use $('#button').click(); every where you want.
If you want to trigger this event when button display changed first you need create an event for this (because Jquery don't have on display changed event).
And then trigger it's your self:
$('#button2').on('click',function(){
$('#button')
.css('display','block')
.trigger('isVisible');
});
$('#button').bind('isVisible',function() {
alert('Clicked...!');
});
$(function(){
$('#button').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button2" value="display the button"/>
<div style="display:none;" id="button">Hello</div>

Click a button element on page load

I'm trying to auto-click a button to initiate a function when the html page loads. I've tried document.getElementById('watchButton').click and it doesn't seem to work, the button is not clicked. Any suggestions?
<div class="content">
<div class="action-area ch30">
<button class="button dh" id="watchButton">Start Geolocation Watch</button>
<button class="button dh" id="refreshButton" >Refresh Geolocation</button>
</div>
The javascript:
run:function() {
var that = this;
document.getElementById("watchButton").addEventListener("click", function() {
that._handleWatch.apply(that, arguments);
}, false);
document.getElementById("refreshButton").addEventListener("click", function() {
that._handleRefresh.apply(that, arguments);
}, false);
},
Thanks!

I'd put it inside document.ready (so it doesn't fire until the DOM loads) and use jQuery syntax:
$(function() {
$('#watchButton').click();
});
http://jsfiddle.net/isherwood/kVJVe/
Here's the same fiddle using jQuery syntax: http://jsfiddle.net/isherwood/kVJVe/4
That said, why not just name your function and call it directly?

It would be click() not click
document.getElementById("watchButton").click();
You would need to call it onload or after the function has run

window.onload = function () {
document.getElementById("watchButton").click(); };
Try this ^^

try trigger
<script>
$(document).ready(function() {
$("#watchButton").trigger('click');
});
</script>

document.getElementById("studyOne").click();
$("#studyOne").trigger('click');
Put this in onload function. It worked for me.

Disable image link on click

I have a image that links to a page. This is a process button which can take up to 20 seconds to run.
I want to prevent the user from pushing it more than once.
How would I write a Javascript that when the button is pushed, it would follow the hyperlink, but the link for the button would disable, and the image would change?

<script>
function buttonClicked()
{
document.getElementById('buttonImage').src = 'new-image.jpg';
document.getElementById('buttonId').disabled = true;
}
</script>
<a id="buttonId" href="next-page.html" onclick="return buttonClicked()"><img id="buttonImage" src="image1.jpg"></a>

From your question, it sounds like your "button" is the image that you click on...if that's true then you can use the following:
<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>
Then your javascript would be:
document.getElementById('my_link').onclick = function() {
document.getElementById('my_link').disabled = true;
document.getElementById("my_image").src='the_path_to_another_image';
};

On click, remove the href attribute from the a element.

I ended up going with the following:
$(document).ready(function() {
var isSubmitted = false;
$("#submit").click(function(e) {
if ( ! isSubmitted ) {
isSubmitted = true;
var src = $(this).attr("src").replace("gold","red");
$(this).attr("src", src);
} else {
e.preventDefault();
}
});
});

Here is a really simple one for you
in your JS
function Create(){
document.write('<INPUT disabled TYPE="button" value="Click Me!">');
}
in your HTML
<INPUT TYPE="button" value="Click Me!" onclick="Create()">
If you are ready to use jQuery, then here is another solution.
$("selectorbyclassorbyIDorbyName").click(function () {
$("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});
select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec
Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick

you can use this.
<script>
function hideme()
{
$("#buttonImage").hide();
}
</script>
<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>
if you don't want to hide image please use this..
$('#buttonImage').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
That will prevent the default behaviour of a hyperlink, which is to visit the specified href.

Let's make a jquery plugin :
$.fn.onlyoneclick=function(o){
var options=$.extend({src:"#"},o);
$(this).click(function(evt){
var $elf=$(this);
if( $elf.data("submitted") ){
evt.preventDefault();
return false;
}
$elf.attr("src", typeof(options.src) == 'function' ?
options.src($elf.attr("src"))
: options.src
).data("submitted",true);
});
}
$(".onlyoneclick").onlyoneclick({
src : function( src ){
return src.replace("gold","red");
}
})
on any button that should trigger only once :
<button ... class="onlyoneclick">tatatata... </button>

its simple...just one line of code :)
Onclick return false.

Hiding a button in Javascript

In my latest program, there is a button that displays some input popup boxes when clicked. After these boxes go away, how do I hide the button?

You can set its visibility property to hidden.
Here is a little demonstration, where one button is used to toggle the other one:
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('togglee').style.visibility = 'hidden';
} else {
document.getElementById('togglee').style.visibility = 'visible';
}
}
</script>

visibility="hidden"
is very useful, but it will still take up space on the page. You can also use
display="none"
because that will not only hide the object, but make it so that it doesn't take up space until it is displayed. (Also keep in mind that display's opposite is "block," not "visible")

Something like this should remove it
document.getElementById('x').style.visibility='hidden';
If you are going to do alot of this dom manipulation might be worth looking at jquery

document.getElementById('btnID').style.visibility='hidden';

//Your code to make the box goes here... call it box
box.id="foo";
//Your code to remove the box goes here
document.getElementById("foo").style.display="none";
of course if you are doing a lot of stuff like this, use jQuery

If the space on that page is not disabled then put your button inside a div.
<div id="a1">
<button>Click here</button>
</div>
Using Jquery:
<script language="javascript">
$("#a1").hide();
</script>
Using JS:
<script language="javascript">
document.getElementById("a1").style.visibility = "hidden";
document.getElementById("a1").style.display = "none";
</script>

when you press the button so it should call function that will alert message. so after alert put style visible property .
you can achieve it using
function OpenAlert(){
alert("Getting the message");
document.getElementById("getMessage").style.visibility="hidden";
}
<input type="button" id="getMessage" name="GetMessage" value="GetMessage" onclick="OpenAlert()"/>
Hope this will help . Happy to help

function popAlert(){
alert("Button will be hidden on click");
document.getElementById("getMessage").style.visibility="hidden";
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Hiding a button in Javascript after click</b>
<br><br>
<input type="button" id="getMessage" value="Hide Button OnClick" onclick="popAlert()"/>

If you are not using jQuery I would suggest using it. If you do, you would want to do something like:
$( 'button' ).on(
'click'
function ( )
{
$( this ).hide( );
}
);

<script>
$('#btn_hide').click( function () {
$('#btn_hide').hide();
});
</script>
<input type="button" id="btn_hide"/>
this will be enough

You can use this code:
btnID.hidden = true;

var start = new Date().getTime();
while ((new Date().getTime() - start) < 1000){
} //for 1 sec delay

How to enable a button after loading the page

I have to disable a button when the page is loading.
How do I enable the button after fully loading the page, using jQuery or JavaScript?

Disable any button from the beginning:
<input type="button" disabled="disabled" />
And add the enable to window ready function
$(document).ready(
function(){
$("input[type=button]", "<input[type=submit]", "input[type=reset]").each( //add more selector here if you want
function(){
if($(this).attr("disabled"))
$(this).attr("disabled", false); //enable button again
}
);
}
);

Or you can do
<body onload="load()">
and
<script type="text/javascript">
function load()
{
document.getElementById("buttonID").disabled=true;
}
</script>

add a disabled property for the button and in the script, document ready function remove disabled function.
$("#buttonID").prop('disabled',false)

This is based on #Bang Dao's answer but using native JavaScript.
Disable the button from the beginning:
<button id="button" disabled>A button</button>
And then listen for the DOMContentLoaded event on document:
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('button');
button.disabled = false;
});