This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the difference between the different methods of putting JavaScript code in an <a>?
What's different between
test
and
test
Thank you very much.
The first is only available for the a tag. It's a link, interpreted by your browser as javascript.
The second is a DOM Event and available for all tags.
The first is a link using the javascript protocol to tell the browser to execute everything after that as JavaScript, rather than trying to load the resource that it points to.
On the other hand, the onclick attribute is an actual JavaScript event handler, and shouldn't be used with javascript: at the beginning - it already knows that it's JavaScript so doesn't need to be told to execute it as JavaScript.
However, in the interests of separating out your content (HTML) and functionality (JavaScript), it's better to use neither of the above techniques, and instead add (for example) id attributes to identify your elements and then use JavaScript to bind your event handlers.
HTML:
test
JavaScript:
document.getElementById('test-anchor').onclick = function(event) {
jsFunction();
}
not this #param
test1
success this #param
test2
function jsFunction($this) {
return $this; // not href attribute this #param ; onClick attribute success this #patam
}
Related
This question already has answers here:
Javascript event handler with parameters
(9 answers)
Closed 7 years ago.
I need to send parameters to the on change event of a dropdown which is generated on runtime. How can i accomplish such thing like:
$(options.host_element).find('select').on('change',(graph_widget.draw_graph).bind(options));
options is the parameter i want to send to the function draw_graph, the function is linked but not the parameters
Not sure of your function's signature, but you can pass parameters to the function itself just like you do to any normal function, so it would look something like this:
$(options.host_element).find('select').on('change',function(){
graph_widget.draw_graph(options);
});
Bind is used to change the value of this that will be used in the function, not quite what you're looking for.
I made a small fiddle to demonstrate:
Fiddle
jQuery.on has an optional parameter called data:
$(options.host_element).find('select').on('change', options, graph_widget.draw_graph);
Later in your event handler, you may access data using e.data:
function draw_graph(e) {
var options = e.data;
}
This question already has answers here:
var self = this?
(8 answers)
Closed 7 years ago.
So I have something like
this.editElement = $("<a href='#'>Edit</a>").click(function() {
this.startEdit();
});
This however takes "this" to be the editElement itself, rather than the parent object.
I've managed to get it to work by making a
var parent = this;
before setting click and then using parent enough of this.
Is this the correct way to solve the problem?
That's a very correct way, yes, and it's common.
You also took the right decision in naming it parent instead of the semantic-less _this we often see.
Other solutions :
to bind the callback to the external this
to use the data argument of JQuery's on to pass the parent
to dynamically find the parent from the callback
but most often referring to a variable kept in the external closure as you did is the cleanest solution.
This question already has answers here:
What is the purpose of the dollar sign in JavaScript?
(12 answers)
Closed 9 years ago.
Please can anyone explain what this javascript code exactly does.
$('#element_id').html(response.title);
I need to access the value of the element_id but I can't using document.getElementById.
Thanks
This code just calls a function named $ and access a method of the returned object.
It's probably jQuery code due to the selector string.
$('#element_id'): Returns a jQuery object for the element with the given ID.
.html(response.title): Sets the inner HTML of the DOM element to response.title.
The raw JavaScript would look like this:
document.getElementById("element_id").innerHTML = response.title;
This code uses probably JQuery. The $ is the basic function defined by JQuery. You can call it to get access to element using a special query language defined by JQuery.
It looks like jQuery, which is a Javascript library. The $('#element_id') creates a jQuery object for the element with the id element_id in the DOM. Then .html(response.title) will put the value of response.title as HTML inside the element.
$ probably refers to jQuery, one of the most frquently used JS libraries.
What this snippet basically does is setting the HTML content of the element with the id element_id to the title attribute of the response object.
This question already has answers here:
javascript document.write() removes the html from page and display result in a blank page [duplicate]
(3 answers)
Closed 10 years ago.
Here is the function:
function funct1()
{
document.getElementById("demo").innerHTML="Something";
document.write("Mexico!");
}
The output is only:
Mexico
when I click the button on the page, whereas I wanted the output to be:
Something
Mexico
In this instance document.write() doesn't do what you think. It clears the contents of the document, and writes Mexico! (see Quentin's answer for a more detailed explanation of why that is). If you remove this line, you can see that your first statement is executed correctly.
If you want to update the first paragraph, and also add another, you should use the following code:
function funct1()
{
document.getElementById("demo").innerHTML = "Something";
// Create a new <p> element, set its HTML and then append it:
var newP = document.createElement('p');
newP.innerHTML = 'Mexico!';
document.body.appendChild(newP);
}
You can see a working jsFiddle here.
After setting the innerHTML of demo, you call document.write. Since the document is in a closed state at this time, this makes an implicit call to document.open which erases the entire existing document (including the stuff you just assigned with innerHTML). Then you write Mexico! to the new document.
Never call document.write after the DOM is ready (and avoid doing so at any other time). Use DOM manipulation instead.
This question already has answers here:
Binding multiple events to a listener (without JQuery)?
(10 answers)
Closed 3 years ago.
How to handle multiple JS events to call same function.. please look at the code..
My requirement is to check uniqueness of Client Code entered in a textbox.. So I'm using something like this:
My code:
<input type="text"
onblur="function1(arg1,arg2)"
onclick="function1(arg1,arg2)"
onfocus="function1(arg1,arg2)">
So, is there any other better way to rewrite this code?
Plain JS:
window.onload=function() {
var fld = document.getElementById("yourfieldid");
fld.onblur=fld.onfocus=fld.onclick=function() {
function1(arg1,arg2);
}
}
If you can use jquery you could do something like this example:
$('#foo').on('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
reference: http://api.jquery.com/on/
Depending on what your goal is though you might want to bind to a different event that more clearly identifies the need for your use-case. Perhaps onChange?