I want to add an onclick in and a button tag over jquery
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>
<img id="loadingImage" src="preoader.gif" style="visibility:hidden">
I need it for this script
<script type="text/javascript">
function openImage(){
if ( document.getElementById('loadingImage').style.visibility == 'visible' )
{
document.getElementById('loadingImage').style.visibility='hidden';
} else {
document.getElementById('loadingImage').style.visibility='visible';
}}
</script>
you can add events like this:
$('#buttonid').on("click", function(){
//do something here like calling openImage();
});
you only need to give your button a unique id like this :
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0" id="buttonid"></button>
EDIT:
if you can not edit the button tag then you may need a different selector.
You can try to get a parent attribute to fetch the right child like this :
$('.parentclass button').on("click", function(){
//do something here like calling openImage();
});
or something like this
$('.parentclass div button').on("click", function(){
//do something here like calling openImage();
});
EDIT SOLUTION:
$(".mejs-play button").on("click", function(){
openImage();
});
You can use this code :)
$(document).ready(function(){
$("#btn").on("click", function(){
var img = $("#loadingImage");
if(img.is(":visible")) {
img.css({"display" : "none"})
} else {
img.css({"display" : "block"})
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btn">Click Here</button>
<img id="loadingImage" src="https://b-digital.info/wp-content/uploads/2018/09/preoader.gif">
If you can't change the html code, you can try using some of the attribute value for the selection part of the jQuery, like in next example:
$("button[title='Play']").click(function()
{
// Just for debugging on the console.
console.log("Click detected on PLAY button");
// Call the openImage() method.
openImage();
});
Your mistake here is trying to mix native js with JQuery.
When you select an item with lets say let item = document.getWhatever then you cant
use Jquery functions on this item so you have to select it from the beginning on with JQuery's method let item = $(#myItem).
Afterwards you can use Jquery functionallity to add an onclick event.
Either by setting the onclick as attribute like this:
item.attr('onclick', 'doStuff()');
or by using the .click() like so:
item.click(function() {
doStuff
});
based on your example you can add:
onClick="openImage();"
event handler on your button:
<button type="button" onClick="openImage();" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>
Try it on codepen.
Related
I'm a little stuck on the follow issue. I have a webpage that has a button when clicked it does some ajax things and if the result/response of that is successful then the buttons class is changed.
What I then want, if that changed button is clicked again, I want it to call a different function.
The first part works no problem. The ajax is called and the buttons class is changed so the colour and text of the button is changed. But when click the button again, I want to call the .btn.off function, but it remains to call the .btn.on function while I would have hoped it would call the .btn.off function.
Unfortunately, my knowledge of jQuery is not the best, any help in the right direction would be very much appreciated.
Thank you so much.
<button type="button" class="btn on btn-danger" id="123"><i class="fa fa-trash-o"></i><span>On</span></button>
<script>
$(document).ready(function(){
$(".btn.on").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn on btn-danger').addClass('btn off btn-success btn-sm');
$("span", this).text("Off");
});
$(".btn.off").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn off btn-danger').addClass('btn on btn-danger btn-sm');
$("span", this).text("On");
});
});
</script>
$('.btn').click(function () {
var btn = $(this);
var isOn = btn.hasClass('on');
if (isOn) {
// do something maybe call on function or write logic for on
} else {
// do something maybe call off function or write logic for off
}
btn.toggleClass('on off'); // flip the on <-> off switch
$('span', this).text(isOn ? 'Off' : 'On'); // was on before toggle so flipped
})
You can do this by checking the classes and take action
The issue is because you're dynamically changing the classes on the element at runtime. One way to work around this is to use delegated event handlers, like this:
jQuery(function($) {
$(document).on('click', '.btn.on', function() {
// AJAX...
$(this).removeClass('on btn-danger').addClass('off btn-success btn-sm').find('span').text('Off');
});
$(document).on('click', '.btn.off', function() {
// AJAX...
$(this).removeClass('off btn-danger').addClass('on btn-danger btn-sm').find('span').text('On');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<button type="button" class="btn on btn-danger" id="123">
<i class="fa fa-trash-o"></i>
<span>On</span>
</button>
Hi this is an odd question and i will try to ask it correctly. I have a function using javascript called load canvas.
function loadCanvas(canvas) {
relevant code here...
}
I also have a normal button called btn.
<button class="btn" type="button">Play!</button>
I am wondering can i disable the function until the play button is selected? The function is for a game using javascript. So on load there isnt anything there until i press play then it appears!
any ideas/help please?
$(document).ready(function(){
var loadCanvas= function (canvas) {
relevant code here...
}
$("#test").on('click',loadCanvas()); // using jquery
document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript
<button class="btn" id="test" type="button">Play!</button>
})
If you are having issue because other method is triggering the function you can add a flag with a boolean and turn it on when you click..
Something like that:
The button don't change at all
<button class="btn" type="button">Play!</button>
The js code with this change:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
And in the on click function add this before call the function:
buttonClicked = true;
At the end your js should look like this:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
$(".btn").click(function(){
buttonClicked = true;
var canvas = ...;
loadCanvas(canvas );
});
EDIT
If you have more buttons with the class .btn you should use an id and change the selector of the .click() with the selector of the id instead of the class selector
As you mentioned in the comments <script type="text/javascript"> loadCanvas("game"); </script> You are calling the function as soon as the page loads. So you will have to change it to:
<button class="btn play-button" type="button">Play!</button>
<script type="text/javascript">
$('.play-button').click(function(e){
loadCanvas("game");}
);
</script>
If you are not using jquery you will have to handle the click event by javascript.
You got to do following:
function loadCanvas(game) {
alert('loading canvas');
}
<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>
I need to have multiple buttons on page (created through a PHP loop) - there's not fixed number of buttons as there'll be one for each record displayed. I'd like to get the value of that button with javascript when it is clicked.
So far the html looks like:
<button id="update[0]" value="test">Update</button>
<button id="update[1]" value="test">Update</button>
<button id="update[2]" value="test">Update</button>
etc....
and my script is:
$(document).ready("#update").click(function() {
var updateId = $("#update").val
alert(updateId);
});
So far the script detects when any #update[] button is clicked but how do I know the index of the particular button in order to get the value (i.e. if #update[38] is clicked how do I know it's #update[38] so I can find the value of that particular button?
Thanks.
You do not want to chain off the document ready like you are as its returning the document.
$(document).ready("#update").click(function() {
So you are capturing the document.click not not button.click so when you reference $(this).val() you will get document.value which does not exist.
Should be:
$(document).ready(function () {
$("button").click(function () {
//no reason to create a jQuery object just use this.value
var updateId = this.value;
alert(updateId);
});
});
http://jsfiddle.net/SeanWessell/2Lf6c3fx/
Use the "this" key word.
$(document).ready("#update").click(function() {
var updateId = $(this).val();
alert(updateId);
});
The this keyword in javascript allows you to reference the particular instance of the object you are interacting with.
Also, add "()" to the end of val.
I believe you meant to use
var updateId = $("#update").val()
With jQuery you can use $(this).val()
You could also get the text of the button using .text()
With pure Javascript you could use .value if the button has a value attribute
See this: Javascript Get Element Value
I would suggest the following
<button id="0" class="updatebutton" value="test">Update</button>
<button id="1" class="updatebutton" value="test">Update</button>
<button id="2" class="updatebutton" value="test">Update</button>
Use a class to apply your click function.
$(document).ready(function () {
$("updatebutton").click(function () {
var updateId = this.id;
alert(updateId);
});
});
And use the id to specify the index of the button.
The trick is to give all your buttons the same class and then use $(this) to find out which button was clicked.
Once you know the button, then you can check for any of its attributes like id, value or name.
$(function() {
$(".xx").on("click", function(evt) {
var clicked_button = $(this);
alert(clicked_button.attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="update_1" class="xx" value="test1">Button 1</button>
<button id="update_2" class="xx" value="test2">Button 2</button>
<button id="update_3" class="xx" value="test3">Button 3</button>
Hi there a few things wrong with your javascript there.
You are attaching onClick to the document! The function ready returns the document.
Wrong:
$(document).ready("#update").click(function() {
Right:
$(document).ready(function () { $(valid_selector).click...
You are attempting to refetch the button with $('#update'), which 1 doesn't fetch anything, and two if it did would return all of the buttons. So use $(this) in the scope of the click function instead to refer to the button clicked.
Here is your javascript corrected:
https://jsfiddle.net/ffkekpmh/
//When the document is ready call this function
$(document).ready(function () {
//Select all buttons whoes id starts with update
//https://api.jquery.com/category/selectors/attribute-selectors/
$('button[id^="update"]').click(function() {
//Store the id attribute from the clicked button
var updateId = $(this).attr("id");
//Store the value attribute from the clicked button
var value = $(this).attr("value");
alert("You clicked button:"+updateId+" with value: "+value);
});
});
I have on my site alot of payment systems and instructions for them (visa, mastercard, amex and so..).
This script shows instructions when clicking on button.
$('#show-visa').click(function() {
$('#instruction-visa').fadeIn();
});
$('#close-visa').click(function() {
$('#instruction-visa').fadeOut();
});
I would need to duplicate this same script for every payment system, but there are many of them (aroung 20-25).. Writing same script for every payment system is not good idea. How can i do it better way?
Since I cannot see your markup, I will improvise...
Several things to note:
I am using .fadeToggle() instead of .fadeIn() and .fadeOut()
Use a common class for toggle buttons and have one .click() handler for all of them
Make use of data-* in your markup
jQuery:
$('.toggle-option').click(function() {
var $target = $(this).data('target'); // Get the data-target attribute
$('#' + $target).fadeToggle(); // Toggle the id specified by data-target
});
HTML:
<button class="toggle-option" data-target="visa">Toggle Visa</button>
<button class="toggle-option" data-target="mastercard">Toggle Mastercard</button>
<button class="toggle-option" data-target="maestro">Toggle Maestro</button>
DEMO
You can extend the jquery prototype object. I created a simple jsfiddle for you.
JSFiddle
$.fn.test = function(){
alert('the id is: ' + $(this).attr('id'));
}
If you want to have different selectors in your html structure for each payment system you could make an array with your payment system names and use $.each function on it to add handler for each one.
var paymentSystems = ['visa', 'mastercard', etc... ];
$.each(paymentSystems, function(name){
$('#show-' + name).on('click', function() {
$('#instruction-'+name).fadeIn();
});
$('#close-' + name).on('click', function() {
$('#instruction-'+ name).fadeOut();
});
};
Add a class to every single element and use the data- attribute to get the element which should be shown.
HTML
<button class="show" data-id="element1">Show</button>
<button class="hide" data-id="element1">Hide</button>
<button class="show" data-id="element2">Show</button>
<button class="hide" data-id="element2">Hide</button>
<div class="element" id="element1">Element1</div>
<div class="element" id="element2">Element2</div>
Js
$(function () {
$(".show").click(function () {
$("#" + $(this).data("id")).fadeIn();
});
$(".hide").click(function () {
$("#" + $(this).data("id")).fadeOut();
});
});
JsFiddle
I have this code:
<a href="#" class="button" id="buyme" ></a>
<span id="please">click me</span>
<script>
$('#buyme').click(function() {
$('#buy').trigger(function(placeOrder('10')));
});
</script>
<script>
function placeOrder(var) {
.....
}
</script>
What I want to do is when I click on #buyme to trigger the onclick from the #buy link or to trigger the function from inside onClick.
My example doesn't seem to do it. Any ideas?
edit:
for some reason :
$('#buyme').click(function() {
$("#buy").click();
});
doesn't work
Just call the function yourself:
$('#buyme').click(function() {
placeOrder('10');
});
You could also trigger the click event of the button and let it call the function (seems a bit backwards though):
$('#buyme').click(function() {
$("#buy").click();
});
$("#buyme").click(function(){
$("#buy").click();
});
Just use click(). According to docs, calling it without an argument triggers the event.
$('#buy').click();
This bit: function(placeOrder('10')) is invalid. Replace it with:
$('#buy').click();