I have the following checkbox in HTML:
function updateSettings(id, bit) {
alert('0');
}
<input type="checkbox" onclick="alert('1');updateSettings(0, 1);alert('2');" />
In IE11 on click I get alerts 1, 2 but not 0: the function is not executed at all.
In Chrome everything works fine.
The function updateSettings is defined in IE on the document object. See this documentaion.
When you put a call inline, as in this case in an onclick, it will look first in the element itself if the function is defined. Then it will search the DOM tree up to document to see if the function is defined (some elements are searched and some not, unfortunately I didn't know the rule governing this until #user4749485 wrote his comment below), and after, as a last resort in window. As it find it, it runs it.
As you defined your own updateSettings probably on the global object (window), it's not fired in IE, because the function defined on the document object is found first.
End of mystery bug :-)
UPDATE :
#user4749485 pointed to the link explaining this at the w3 site, the information is in item 1.10 - Lexical Environment Scope. To sum it up :
<element onclick="functionFoo();">bar</element>
implies following procedure :
Does element.functionFoo exist ? YES ==> use this function.
ELSE
Does element belong(1) to a form and form.functionFoo exist ? YES ==> use this function.
ELSE
Does document.functionFoo exist ? YES ==> use this function.
ELSE
Does window.functionFoo exist ? YES ==> use this function.
ELSE
crash.
(1) = an element belongs to a form != an element is inside a form element. Roughly it must be a form element, like in the question an input element.
Found the issue, but it's strage. If you change the function name to lower case, then it works.
function updatesettings(id, bit) {
alert('0');
}
<input type="checkbox" onclick="alert('1');updatesettings(0, 1);alert('2');" />
DEMO: http://codepen.io/anon/pen/YXLgxJ
UPDATE: As Zimmi has explained updateSettings is an inbuilt method document.updateSettings() in IE and this will be triggered on onclick event instead of our method window.updateSettings()
I'd suggest not to use an inline onclick event and instead use jquery to define an event for the checkbox:
function updateSettings(id, bit) {
alert('0');
}
jQuery(document).ready(function(){
jQuery("#cbMyCheckbox").click(function(){
alert('1');
updateSettings(0, 1);
alert('2');
});
});
and then in your html:
<input type="checkbox" id="cbMyCheckbox" />
Related
I have the following HTML:
<input type='checkbox' onchange='checkvalue(this)' def='checked' value='checked' />
and the following javascript:
$(document).ready(function(){
function checkvalue(){
if($(this).attr("value") != "checked"){
($(this).attr("value") = "checked");
}
else{
($(this).attr("value") = "unchecked");
}
}
});
Basically whenever a checkbox is checked or unchecked I want to call this javascript function which will see whether or not the default value of the checkbox is checked or unchecked, and then change the value accordingly - if a checkbox had default value of checked and is clicked, the value should change to unchecked and vice versa. However, I get the following error when I click on my checkbox:
Uncaught ReferenceError: checkvalue is not defined (index):38
onchange
Here is the link to my jsfiddle: http://jsfiddle.net/LRneA/
checkvalue is not in the global scope. It is local to the ready handler, which is an anonymous function.
I suggest not using onclick="...". If you're already using jQuery, bind the event using jQuery also:
$("#myCheckBox").on("click", checkvalue); //you will need to give your checkbox
//an id
You can do this inside the onReady handler.
Another thing I noticed:
if($(this).attr("value") != "checked")
Isn't going to work. The value of the checkbox has nothing to do with it being checked or not. Use the :checked pseudoselector instead along with .is:
if($(this).is(":checked"))
The function/identifier checkvalue is local to the "on ready" function.
To use checkvalue from an inline event attribute, you must make it accessible from the relevant (global) scope. For instance,
$(document).ready(function(){
function checkvalue(){
// ..
}
window.checkvalue = checkvalue;
});
However, simply eliminating the use of inline events is often preferred. If the element ID is not known, or the event must be applied to many elements, then Event Delegation (i.e. .on) can be used.
jQuery(function($){
function checkvalue() {
// ..
}
// ideally you'd pick a more refined ancestor than "document"
$(document).on("click", "checkbox", checkvalue);
});
And, if you do continue with inline events, and you do fix the first mentioned issue, then you'll also have to use apply to correctly setup the context or this will evaluate to the window object in the handler, which will be no fun and lead to other errors.
onclick="checkvalue.apply(this)"
I am a beginner & self interested web coder.
I have been testing, asking, retesting, trying, reading up on different functionality solutions in javaScript to an online form which will consist of a multitude of <textarea>'s once I am done.
I am fairly ok, with the current state of functions, which are based upon several js events. Example code would be (written funny so it is easier to read in the forum, actual code is one line obviously):
<textarea
data-id="0"
class="classOne classTwo"
id="dataInput_0"
name="xInput_row_1"
onFocus="functionOne();"
onBlur="functionTwo();"
onKeyUp="functionThree();">
</textarea>
I built and tested all the functions to work specifically on the id="dataInput_0" using getElementById. Example:
var d = document.getElementById("dataInput_0");
So my question is how to I make the functions trigger for other "dataInput" id's?
In other words:
var d = document.getElementById('whichever dataInput that is active/focused');
Thanks!
The simplest way to work with your current code would be to do this:
onFocus="functionOne(this);"
...and then define your function:
function functionOne(el) {
// el is the element in question, used e.g.:
alert(el.name);
}
Within the onFocus=... the browser sets this to the element in question, so you can then pass it as a parameter to your function. Your function then just uses it directly rather than having to go via getElementById().
But since you mentioned jQuery, you could remove the inline onFocus and other onXYZ handlers from your html and just do it all in your JS as follows:
$("textarea").focus(function() {
// here this is the element in question, e.g.:
alert(this.value);
});
That defines a focus handler for all textareas on the page - to narrow it down to just textareas with class "classOne" do $("textarea.classOne"). Within the function this refers to the focused element. You could use the .blur() and keyup() methods to assign handlers for the other events shown in your code.
My suggestion is to use attribute selector $('input[id^="dataInput_"]') for this and use the jQuery's .on() handler this way:
$('input[id^="dataInput_"]').on({
focus: function{
functionOne($(this));
},
blur: function(){
functionTwo($(this));
},
keyup: function(){
functionThree($(this));
}
});
and the functions:
functionOne(obj){
console.log(obj.val());
}
functionTwo(obj){
console.log(obj.val());
}
functionThree(obj){
console.log(obj.val());
}
I'm not really a developper. I prefer to design my websites ... So, for my actual project, i must developping some "basic" scripts.
I've met a problem with this:
<script type="text/javascript">
$("button").click(function toggleDiv(divId) {
$("#"+divId).toggle();
});
;
</script>
Into Head-/Head
LINK
<div> id="myContent">Lorem Ipsum</div>
It works for IE8. (Miracle). But not the others browsers...
The idea is that when u click on "LINK" a windows appears and when you click again, the window close.
Any idea ?
Thanks for u time !
One of the problems is you're mixing two different styles of binding event handlers: one of them is good (the jQuery method), the other is bad (the javascript: protocol in your href attribute) - the two don't work together in any way. Another problem is that your selector is completely incorrect (it's looking for a button) for the HTML you've provided (you never create a button).
I'd suggest using a HTML5 data-* attribute to specify the id for the <div> on your <a> element:
LINK
<div id="mycontent">Lorem ipsum</div>
Then use the following jQuery code:
$('a').click(function(e) {
e.preventDefault(); // e refers to the event (the click),
// calling preventDefault() will stop you following the link
var divId = $(this).data('divid');
$('#' + divId).toggle();
});
Note that I've used this in the above code; what this refers to depends on the context in which you use it, but in the context of a jQuery event handler callback function, it will always refer to the element that triggered the event (in this case, your <a> element).
If you extract toggleDiv from the handler, it ought to work. You will probably also need to return false to keep the href from trying to go anywhere.
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
return false;
}
</script>
I've just begun to play around with Dojo. I simply wanted to display a dialog when an item in a Dijit ComboButton's DropDownMenu is clicked. I tried using dojo.connect to associate the onclick event with a function which would simply display a dialog with the text contained in the item, with no luck.
I've managed to get it working in a horrible way. All the work is now actually written to the onclick attribute manually. I'm clearly misunderstanding something here. This is what I currently have:
JS:
require(["dijit/form/Button", "dijit/form/FilteringSelect", "dijit/DropDownMenu", "dijit/MenuItem"]);
//if the following is defined inside dojo.ready, nothing happens
function getmail(text)
{
alert('No mail from '+text);
}
dojo.ready(function(){
//the following does nothing:
dojo.connect(dojo.query(".dijitMenuItemLabel"), "onclick", function(evt) {
console.log("mail item clicked");
alert('Blah');
//dojo.stopEvent(evt);
});
});
HTML:
<form method="POST">
<div data-dojo-type="dijit.form.ComboButton" id="getmail">
<span>Get All Mail</span>
<div data-dojo-type="dijit.DropDownMenu">
<div data-dojo-type="dijit.MenuItem"
data-dojo-props="onClick:function(){getmail(dojo.trim(dojo.query('.dijitMenuItemLabel', this.domNode)[0].innerHTML))}">
Yahoo</div>
<div data-dojo-type="dijit.MenuItem">Google</div>
</div>
</div>
</form>
What does it look like I am clearly misunderstanding about Dojo?
(Or maybe I'm making simple JavaScript mistakes)
JSFiddle
You should be able to do it with something like
var myButton = dijit.byId('getmail');
myButton.on('click', function(){ alert('clicked') });
My guess is that you confused dojo.byId and dijit.byId when you fetched your button - regular DOM nodes work when you conenct a lowercase 'onclick' but widgets fire a camel case 'onClick' event (the distinction is because dijits fire with some keyboard events, for accessibility).
However, for newer versions of Dojo it is probably best to stay away from dojo.connect and instead just use simpler ".on" API I showed.
Ah, and before I forget, it also looks like you could have forgotten to run the Dojo parser (or set parseOnLoad to true) so the button was never created. Can you provide a fully executable example on JSFiddle?
really basic stuff here. I'd like to give a click function a name and assign some parameters to it. The goal is code reusability such that I can write only one generic function for common tasks such as for enabling users to delete various data.
Here's a jsfiddle to show you what I mean.
And here's that code:
the HTML:
<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>
and the JS:
// this function would be loaded on my site's template and therefore would be available across my entire site.
function deleteThis(data_id){
$('button').on('click', 'button', function(){
$('div[data-id="'+data_id+'"]').hide();
});
}
var clicked_id=3;
function deleteThis(clicked_id);
// this function would be called on the various pages where users can delete things and this variable, clicked_id, would be assigned=3 by the user's action on that page.
How do I give this button click event a name?
update thanks all! the $('button') should have been $(document.body) or the button's parent element. It works if you make that simple change. You can also do it as Michael Buen suggests below.
Just refactor your code, put the delete functionality on its own function
<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>
$('button').on('click', function() { deleteImmediately(3) });
function deleteImmediately(id) { -- refactored code
$('div[data-id='+id+']').hide();
}
Live test: http://jsfiddle.net/e2kuj/2/
In your fiddler, the (function deleteThis(){})() is making it private and you are trying to access it as a global!
I think you're misunderstanding events. deleteThis only makes sense if it's in the handler.
corrected HTML: (don't use custom attributes for referencing HTML - They're slower)
<button>delete this</button>
<div id="del_3" class="delete">something bad</div>
<div id="del_4" class="delete">something else bad</div>
JS: (untested)
var deleteTargetId = 'del_3'; //clicked_id renamed for clarity
function deleteThis(targetId){
$('#'+targetId).remove(); //removes rather than hides the html
}
$('button').click( function(){
deleteThis(deleteTargetId);
} );
Now you could swap deleteTarget and the HTML with that ID would get yoinked.
However, if this is homework, I'm wondering if you understand the assignment. The var named 'clicked_id' suggests the idea is to click the divs to make them disappear and use delegation. That one's easy.
You'll need to understand event delegation and event bubbling to see what's going on here. Basically when something is clicked, the event then fires on the parent element and then that parent element's parent element, all the way up to the HTML tag. This happens with all events and doesn't cause the trouble you might think because containers are rarely assigned listeners for events. Links and buttons are more typically end point nodes or at most contain a span or an image. Usually when bubbling causes a problem it's because somebody's doing something awful with HTML or they should've been using delegation in the first place.
'on' is the new piss-poor name for the once appropriately named and less confusion-prone 'delegate' jquery method. Essentially anything in the body with the class 'delete' triggers the handler. We don't care about the ID since the idea is to kill the div that was clicked and 'this' gives us a reference to it. This is unusual behavior for JQ, since most methods would have 'this' point at the 'body' but it's obviously a more useful thing to point at for event delegation.
$('body').on('click', '.delete', function(e){
$(this).remove(); //this refers to the originally clicked element
} );
//note: not the solution you asked for, but possibly the one you needed.
It was almost right. I updated it -> http://jsfiddle.net/fz5ZT/41/
function deleteThis(id){
$('button').click(function(){
$('div[data-id="'+id+'"]').hide();
});
};
deleteThis(3);
you can remove the element in a different way:
$('button').on('click', function(){
$(this).next("div").remove();
});
http://jsfiddle.net/fz5ZT/46/
You could just use $('button').on('click', 'button', clickHandler); to reference the clickHandler function.
I am big fan of such things since apart from being reusable it has the following advantages.
I will be able to just send across a patch in case there's a bug in the clickHandler
Someone can augment my method which is not possible with anonymous methods
Readable, and also useful to see the stack trace in case of errors
Hope that helps.
Update:
function clickHandler(ev) {
ev.preventDefault();
// ... handler code
}