I not know why not work following code for my function(alert()) and is run my function(alert()) after tow times click on button, did you can guide me?
Demo:(Here see my full code) http://jsfiddle.net/pRXQ7/1/
$('.iu').click(function() {
if(alert() == true){
alert('ok')
}else{
alert('no')
}
});
By naming your function alert, you've effectively overridden the native javascript alert function. Name it something else.
Also, in your alert function, you are referencing this. In the scope of the function, this points to the document object, not the element which was clicked. Try passing the element instance to your function from the click event handler.
See http://jsfiddle.net/pRXQ7/15/
Related
im trying to get a lil project going but im stuck on a very annoying thing.
$(document).ready(function() {
$("#search-button").click(console.log('hello'))
});
as you can see im targeting a search button with the id search-button and as soon as i click it something should happen. in this case i put a console.log in to test if it works but it doesn't. it always logs it as soon as i load the page , not when i click the button i target. ... what am i doing wrong
if you need more info on this pls tell me i tried to keep it as simple as i could
ty for your help
O.k
The click handler needs a function argument, not just the console.log by itself. Try this:
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
Inside of .click should be a handler .click(handler) and the handler should be a function. The browser is reading the code and when it hits console.log('hello'), it does it! It's seeing .click etc, but it doesn't matter; it next sees console.log and does it.
Try
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
As others have mentioned, the click function requires its own callback function. You can also use this, without requiring the use of document:
$("#search-button").on('click', function() {
console.log('hello')
})
I hope You're using jQuery version 3 or up. if you use 3 or up jquery version the good practice is you use Document binding Example:
jQuery(document).on('click', '#search-button', function(event) {
//your Code here...
console.log('hello');
});
I know this has been covered elsewhere on this site, as well as many others, but I just can't seem to figure it out.
I have an anchor tag that I use to show a lightbox form:
<a id="aNoData" href="#divNoData" class="fancybox">No Data</a>
I want to click it using a javascript function:
function fnNoData()
{
// This line works
alert("this line works");
// Neither of these lines work
$('#aNoData').click();
document.getElementById('aNoData').click();
}
I'm calling the function from my code behind, like this:
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "fnNoData()", true);
When I do this, the first line (the alert box) shows fine. However, the other two lines (to click the anchor tag) do not. The non-working lines work great if I put them in my $(document).ready block (the anchor clicks on page load). So it seems that the lines to click my anchor work fine, just not in my function.
Can anyone see what I'm doing wrong?
If you want to do click directly than you can use trigger
Check this hope this will helps you.
function fnNoData()
{
// This line works
alert("this line works");
//trigger
$('#aNoData').trigger('click');
//document.getElementById('aNoData').click();
}
jquery click event is expecting a function
(not tested)
$('#aNoData').on("click", function() {
console.log( "clicked the element with id aNoData );
});
in case you want to trigger the click(without the actual click), jquery has a function for that too:
http://api.jquery.com/trigger/
Quote from your comment
OK Patrick, thanks, and I did try putting the whole function inside my $(document).ready block, but it doesn't work at all there
You should not define the whole function inside $(document).ready(), instead define it outside and call it from inside the ready() function
Your original function
function fnNoData(){
// This line works
alert("this line works");
// Neither of these lines work
$('#aNoData').click();
}
Call it from ready()
jQuery(document).ready(function () {
fnNoData();
});
Hope this helps!
It took hours, but I finally brute-forced a solution.
As some repliers suggested, my code behind was trying to use the DOM before all elements were fully loaded. I got around that by changing the line in my code behind to this:
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "$(window).load(function() {fnNoData();});", true);
I'm attempting to do a project in which I need to change attributes on a button. I have no code for you, but I still need help. Is there any way I can change a button that's already there so that the onclick attribute runs a different function from before? Thanks in advance.
I feel like all the answers so far miss the main point. Since you don't have any code examples, I'm guessing you'll find it hard to extrapolate out what everyone is saying.
So, one button, which when clicked, changes to another method, and when clicked again, changes back. I'm using the onclick attribute for simplicity, but as others have shown, using JavaScript .onclick or addEventListener is a better choice.
function function1(e) {
// Show where we're at
alert("function1 is running");
// Get which button was clicked from the event that is passed in, and set its onclick event
e.currentTarget.setAttribute("onclick", "function2(event)");
}
function function2(e) {
// Show where we're at
alert("function2 is running");
// Get which button was clicked from the event that is passed in, and set its onclick event
e.currentTarget.setAttribute("onclick", "function1(event)");
}
<button onclick="function1(event)">Click Me!</button>
You can of course change what function1 and function2 do, and add more changes (e.g. function 3 and 4), add logic for when to change, and so on.
use .onclick = function_name;
Demo :
document.getElementById('myButton').onclick = fun2;
function fun1() {
alert('I am from Function 1');
}
function fun2() {
alert('I am from Function 2');
}
<button id='myButton' onclick='fun1()'>Click me</button>
Yes, you can. There's only one thing to keep in mind:
An event on which you want the change to happen
Once you have identified that event, just bind it with JQuery's .attr() function to change any attribute.
Read more: http://api.jquery.com/attr/
Javascript Events: https://developer.mozilla.org/en-US/docs/Web/API/Event
Use jQuery like:
$("mybtn").click(function(){
$("#mybtn").attr({
"onclick" : "anotherFunction()",
});
});
Yes, it's possible. Check this fiddle: https://jsfiddle.net/gerardofurtado/ga3k7ssp/1/
I set a variable to 0 and this function for button 1:
bt1.onclick = function(){
i++;
myPar.innerHTML = i;
};
It increases the variable and displays the number.
But, clicking on button 2, it changes button 1 function:
bt1.onclick = function(){
i--;
myPar.innerHTML = i;
};
Now button 1 decreases the variable.
This other fiddle is similar, but using radio buttons, to show that you can set the original function of button 1 back: https://jsfiddle.net/gerardofurtado/8gbLq355/1/
I've got a simple If statement that checks if a checkbox is check or not that is called on a click event, however the click event appears to not be working.
I've for two dummy alerts into the if just to see if it being hit or not but neither of them are.
HTML:
<input id="cookie-checkbox" name="cookie-checkbox" class="cookie-checkbox" type="checkbox" checked><label for="cookie-checkbox">I give consent for the use of cookies on this website.</label><br /><br />
<button id="cookiesbutton" type="button" class="btn btn-default">Send</button>
JS:
(function () {
$('#cookiesbutton').click(cookiesDismiss());
});
function cookiesDismiss() {
var cookieConsent = $('#cookie-checkbox');
if (!cookieConsent.checked) {
alert("Cookie removed");
}
else
{
alert("Modal hidden");
}
}
I have a fiddle set up with the code at: JSFiddle
I'm almost sure that I'm missing something really, really small and simple, but I just can't seem to see it.
You need to give the click handler the reference to your cookiesDismiss() function, not the result of the function.
Also note that you need to precede the document ready handler with a $, and checked is not a property of a jQuery object; you need to use prop('checked') to get the state of the checkbox.
$(function() {
$('#cookiesbutton').click(cookiesDismiss); // note the removal of ()
});
function cookiesDismiss() {
var cookieConsent = $('#cookie-checkbox');
if (!cookieConsent.prop('checked')) {
alert("Cookie removed");
} else {
alert("Modal hidden");
}
}
Updated fiddle
OK, you clearly need to first get your JavaScript fundamentals straight :) But, here are your mistakes:
On the first block of code, you seem to write an Immediately Invoked Function Expression (IIFE). In JavaScript, the following is a function declaration:
function myFunction() {
// My awesome stuff
}
Without anyone else invoking this function, it is pretty much useless. You can invoke the function as myFunction() or invoke the function immediately as it is declared as:
(function myFunction() {
// My awesome stuff
})();
This pattern is mostly used to prevent your function body from exposing variable on global scope.
so, in your case, the click event handler was never registered because the function was never invoked.
Now, you know what a function invocation is. myFunction() invokes the function. While myFunction gets a reference to a function.
When registering event handlers, the argument you pass is a reference to a function.
$('#myButton').click(myFunction);
So, you say, invoke my function myFunction everytime $('#myButton') is clicked. So, your mistake was you invoked the function cookiesDismiss() immediately, so what was registered as a handler for the button click was whatever was returned by your function cookiesDismiss which is nothing (undefined) and therefore nothing happens.
Others have placed the correct code here, but you should definitely invest time learning the fundamentals.
Whenever you add parentheses "()" to a function its get executed/evaluated at that time only and in your case it assigned the evaluated value of the function instead of actual function.
Eample:
Where "target" is the ID of the html control.
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
or
$( "#target" ).click(showAlert);
function showAlert(){
alert( "Handler for .click() called." );
}
In your case:
As funation name is "cookiesDismiss" it should be as below mentioned code:
$('#cookiesbutton').click(cookiesDismiss())
(function () {
$('#cookiesbutton').click(cookiesDismiss);
});
Hope this will help you :)
1st: You missed the $ sign
2nd: $('#cookiesbutton').click(cookiesDismiss()); fire the event in the beginning.
3rd: .checked is wrong. You can use .is(":checked")
4th: Rory McCrossan provided the solution.
(I've previously also tried JQuery, which doesn't seem to work either.)
I have emitterButton, which is a circle in Raphael, defined as follows inside a function:
emitterButton = canvas.circle(emitter_center_x,emitter_center_y,BUTTON_RADIUS)
.attr({'fill':BUTTON_COLOR_UNPRESSED})
.attr({'id':'emitterButton'});
. When I try to attach a click handler, via
$(document).ready(function(){
console.log("This is a hi!");
console.log(emitterButton);
emitterButton.click(function(){
console.log("Hi!");
if(emitterButton.attr('fill')==BUTTON_COLOR_UNPRESSED){
console.log("Hi, again!");
emitterButton.attr({'fill':BUTTON_COLOR_PRESSED});
}
});
});
the first two console.log statements fire, but the next two don't. Why isn't my click function working?