I've implemented the Google FastButton script into a web page. Following:
Trying to implement Google's Fast Button
The code works great. My question is how do I implement this for multiple buttons. I have several buttons that are dynamically created. I don't want to define each button with its own function. Can I use this script with another function that passes some variable.
For example, <button id="quick" onclick="someFunction(24);">button</button>
Current implementation
new FastButton(document.getElementById('quick'), function() {
alert("hello");
});
<button onclick="onLayerClick(8)">8</button>
Here's one way to do it: According to the link you pasted, the FastButton prototype accepts a function as its second argument (this.FastButton = function(element, handler)) and passes the click event to that function. So if you do something like this:
HTML:
<button id="quick">24</button>
JS:
var myHandler = function(event) {
var el = event.target;
console.log(el.innerHTML);
}
new FastButton(document.getElementById('quick'), myHandler);
Then the myHandler() function will have access to the DOM element where the click event originated (event.target), which will be whatever button was clicked. So you'll have access to that button's innerHTML, or you could put a data-mynumber="24" attribute on the button and use el.getAttribute("data-mynumber") instead of el.innerHTML... However you want to identify the button is up to you.
Related
I'm trying to add an OnClick function to 4 elements element on page load and then make those OnClick functions change the text of a separate element. I tried creating a function called AddClick that specified the elementID and then sets an OnClick attribute and seperate function. (I did this four times for each element I want to have the new function activated on click.
I then asked the AddClick to run on page load.
Then I created the functions that would replace the old text of the seperate element. (These should be set to run when the elements are clicked.
Sorry in advance if this was the wrong approach/If I'm not clear. First time posting on here, any help appreciated.
For the HTML the text I am trying to alter is within a div with an ID, but the h4 does not have a specific ID and I cannot add one.
Here is the JavaScript I tried to implement:
<script type="text/javascript">
function AddClick(){
//Name & Number
document.getElementById("o_5794738").setAttribute('onclick', "NewText()");
//Number
document.getElementById("o_5794733").setAttribute('onclick', "OldText()");
//Name
document.getElementById("o_5794723").setAttribute('onclick', "OldText()");
//None
document.getElementById("o_5794728").setAttribute('onclick', "OldText()");
};
window.onload = AddClick;
function NewText() {
document.getElementById("pt_fc_775338").getElementsByTagName(h4).innerHTML = "<h4>New Text</h4>";
}
function OldText() {
document.getElementById("pt_fc_775338").getElementsByTagName(h4).innerHTML = "<h4>Old Text</h4>";
}
Any help is much appreciated.
You can try this:
document.getElementById("demo").onclick = function() {myFunction()};
I found this example on https://www.w3schools.com/jsref/event_onclick.asp
No need to add click event using load you can directly add the click event using .addEventListener (by the way .setAttribute is not for adding any event)
Simply use .addEventListener like this :
document.getElementById("o_5794738").addEventListener('click', NewText);
Read this for more info about .addEventListener()
Here is the demo snippet below :
document.getElementById("o_5794738").addEventListener('click', NewText);
function NewText() {
document.getElementById("pt_fc_775338").getElementsByTagName("h4")[0].innerHTML = "New Text";
}
<button id="o_5794738">Click Me!</button>
<div id="pt_fc_775338">
<h4></h4>
</div>
I have dynamically generated links like
<a name="details" id="1" href="javascript:;">Details</a>
When one of them clicked I want to process this event with javascript code like this
$(document).ready(function () {
var a = document.getElementsByName('details').item(0);
a.on('click', function () {
$.ajax({
///
});
});
});
However, even though it seems to find hyperlinks quite perfectly, on click event it doesn't enter the function.
What is wrong with the implementation?
on is a method you find on jQuery objects.
document.getElementsByName('details').item(0) returns a native DOM element.
Either use addEventListener instead of on or $("some selector") instead of getElementsByName & item.
I'm trying to use AJAX loading a set of sucessive pages in a main page, as I show you in the next picture:
I learned (thanks to this community!) to call other pages' content, by assigning the load() function to the onclick event of a button, like this:
$(document).ready(function() {
$('#btn').click(function() {
$('#result').load('./poi-data-no-heading.html');
});
});
But what if I have one button with id="btn" on every page? The functionality of any button with that id will be the same always, because (I think) the document.ready is not triggered when I use the load() method, so it's never replaced with new functionality.
E.g. initial functionality should be navigate from page 1 to page 2, and when page 2 is loaded, the functionality should be to navigate from page 2 to page 3.
As Js developer, I would do the following:
<!-- In the HTML file -->
<button id="btn" onclick="loadContent()">Load</button>
<div id="result"></div>
/* In the JS file */
function loadContent(){
/*the code to retrieve content*/
$('#result').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');
}
This way I could assign the functionality to every button, no matter what's the ID or if the document.ready is triggered. But mixing Js with JQuery is not an option... So, how do you think I should manage to do something similar with JQuery?
Thanks in advance.
P/d: Here is a useful fiddle I used to try ideas: http://jsfiddle.net/gal007/vkcug7t7/1/
You could use the on() event from jQuery, which can listen for events on elements dynamically rendered (you can't do that with the click() method). So in this case you have to listen to the event on a parent element, one that doesn't change with the load method. On that button, use an HTML5 data-* attribute to define the id that you wish to load.
HTML:
<btn id="result" data-load-id="1">Load</btn>
Javascript:
$('#container').on('click', '#result', function() {
var id_to_load = $(this).data('load-id');
load('/url?' + id_to_load);
});
I've updated your fiddle : jsfiddle
I am trying to create a button dinnamically for adding a view before upload something to a database.
I am using jquery for my web, so if solution is in jquery, better.
Now I am trying a piece of code I found here: Creating Dynamic button with click event in javascript
This is how I adapted for my case:
var element = document.createElement("input");
//Assign different attributes to the element.
element.type = 'button';
element.value = 'hello'; // Really? You want the default value to be the type string?
element.name = 'HELLO'; // And the name too?
element.onclick = window.open('test.html?name=test&surname1=test2&surname2=test4', 'my_new_window');;
var foo = document.getElementById("registerButtonDiv");
//Append the element in page (in span).
foo.appendChild(element);
It adds the button (well, it is a simple button and not like the others in my webpage, I guess, something related to css)
But if I try to use something like I did about onclick event, it creates the button but don't add the onclick part. I tried changing quotes, not using them... many things so maybe now it is wrong. Don't take it so seriosuly, I just copy the latest version. With the alert on the example, it works fine.
What do I have to do to fix this?
I need to do this way because I have to pass some variables dinnamically filled to the other page and this is the simplest solution I found.
As onclick is an event, it needs a handler. And here you can handle the event using any handler which can serve you as your requirements.
element.onclick = function(){
window.open('test.html?name=test&surname1=test2&surname2=test4', 'my_new_window');
};
Demo
You need to pass a function reference to onclick:
element.onclick = function(){
window.open(...);
};
or using jquery:
var element = $('<input type="button" value="hello" name="HELLO">');
element.on('click', function() {
window.open('test.html?name=test&surname1=test2&surname2=test4', 'my_new_window');
});
$("#registerButtonDiv").append(element);
jsfiddle
There is a link in my webpage, the link itself triggers a function that I could not modify, but I want to make the link, when clicked, also calls another JavaScript function at the same time or preferably after the first function is done. So one click to call two functions...could it be implemented? Thanks
<a title="Next Page" href="javascript:__doPostBack('Booklet1','V4504')">Next</a>
is the sample tag I want to modify, how could make it also call "myFunc" at the same time or preferably after _doPostBack is done.
P.S. the function parameter for _doPostBack such as V4504 is dynamically generated by the ASP user control. So I cannot simply treat it as a static function and bind it with another. I think I could only append some function to it? Unless I parse the whole page first and extract the function name with its current parameters...Since every time I click the link, the parameter such as V4504 changes its value....
Thanks!
You should be able to attach multiple event handlers to a single anchor tag, either with .onclick or .addEventListener('click', function)
https://developer.mozilla.org/en/DOM/element.addEventListener
You can attach a handler to an element click event using plain Javascript in such a way:
function hello()
{
alert("Hello!")
}
var element = document.getElementById("YourAElementID");
if (element.addEventListener)
{
element.addEventListener("click", hello, false);
}
else
{
element.attachEvent("onclick", hello);
}
It supprots all common browsers.
Yes, you can do this MANY ways (I use both $(this) and $('identifier') as you don't say how the functions are bound) :
$(this).click(function(){
my_function_1();
my_function2()
});
Or
$('my element').click(function(){
my_function_1();
});
$('my element').click(function(){
my_function_2();
});
Or, if the functions reside on another object:
$(this).click(function(){
my_function_1();
$('#other_element_id').trigger('click'); //there are a bunch of syntaxes for this
});
Sans JQuery, you can use:
var myObj = document.getElementById('element name');
myObj.addEventListener('click', function(){
alert('first!');
});
myObj.addEventListener('click', function(){
alert('second!');
});
Clicking will result in two sequential alert prompts