This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 3 months ago.
Sorry if this is incredibly obvious, but I have no idea why this isn't working.
I'm trying to create a jsFiddle. However, I don't seem to be able to attach any of the javscript to any of the elements. For example, onclick is not calling my js function.
It doesn't get any simpler than this fiddle. I copy-pasted it from the W3 editor where it works just fine - click the button, get alert!
<button onclick="myFunction()">Click me</button>
function myFunction() {alert("sss");}
http://jsfiddle.net/tpip/NYkQN/2/
What am I missing here??
Just change the way the JavaScript block is loaded to no wrap (head)
The standard setting here is that the JS is wrapped(!) to be run after the DOM has loaded. That means the function is not defined in global scope but inside the wrapper. Inline event handlers only work with globally defined functions though!
When setting to no wrap (head) the JS is loaded in the <head> and is not wrapped.
Related
This question already has answers here:
execute function after complete page load [duplicate]
(16 answers)
Closed 3 years ago.
I am in need of some JS assistance.
I need to run some code after the DOM was updated.
For example: when I click a button, it fires a function. I need to run that function code and when the DOM is fully updated, run some more code. How could I go about doing this in a clean fashion?
I am sure this is relatively simple but I am drawing blanks. I am using jQuery.
$('.btn').click(function() {
do some stuff
// then ensure dom has fully updated and do some more????
})
DOM updates are synchronous. Just put the code where your comment is.
This question already has answers here:
Do you ever need to specify 'javascript:' in an onclick?
(8 answers)
Closed 8 years ago.
Can someone please explain the difference between:
onclick="javascript:fnName(this);"
...and...
onclick="fnName(this);"
Is there any performance hit? or when to use what?
Not actually, and usually you don't write the first one. Because onclick handler is handled by the JavaScript, so calling JavaScript to handle it won't be a good bet.
In the context of event attributes it's completely useless. It's mainly used inside of the href attribute and allows you to create a pseudo-onclick event:
click me
Also you can just put it in the location input in your browser and run scripts. It's simillar to the console input.
Edit: I realized it's not really useless but it has completely different usage than you would thought. In the context of these event attributes it behaves like in a normal code and so it's a label. Try this:
<div onclick="javascript:while(true){while(true){alert('hello');break javascript;}}">click me</div>
This question already has answers here:
onclick="" vs event handler
(9 answers)
Closed 8 years ago.
I've tried googling but I'm having trouble expressing what i'm asking.
There seem to be different ways to trigger events and I was wondering if there's a difference between them.
On way is for example:
window.onload=function(){headerAdjustWidth();thumbsArrange();checkHash();}
window.onscroll=function(){windowScrollStore();}
window.onresize=function(){headerAdjustWidth();thumbsArrange();windowScrollAdjust();showExpanded(false);}
window.onkeydown=function(){checkKeyboard();}
And another way is
<body onKeyDown="checkKeyboard();" onLoad="headerAdjustWidth();thumbsArrange();checkHash();" onScroll="windowScrollStore();" onResize="headerAdjustWidth();thumbsArrange();windowScrollAdjust();showExpanded(false);">
Are there any pros/cons to each so far?
The other thing is for the onload functions, is there any reason why I should/shouldn't just put them straight in a <script> thing? e.g:
<script type="text/javascript">
headerAdjustWidth();
thumbsArrange();
checkHash();
</script>
Finally, is there any reason why I should do window.onscroll=function(){windowScrollStore();} rather than window.onscroll=windowScrollStore?
In my point of view, it is much better to not include calls of javascript within HTML because this makes several building steps complicated such as OFFUSCATION of code.
I highly recommand to use the solution to keep javascript within javascript.
Concerning onload function, as described abode, I function on scripts as it simplificates building process.
This question already has answers here:
addEventListener vs onclick
(21 answers)
Closed 3 years ago.
I'm little confusing by using "onclick" "onmousedown" as a property of HTML elements.
Such as:
<button onclick="my_JS_function()"></button>
or
<div onmousedown="my_another_JS_funciton"></div>
But some people tell that only "proper" way of adding "listeners" are by
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
What is the more "proper" more supported way of doing that?
if you already know function and element is part of html i.e. not get added dynamically than its good that you add function inline rather than using extra method call like "addEventListener"
Another thing to note
While onclick works in all browsers, addEventListener does not work in older versions of Internet Explorer, which uses attachEvent instead.
OnClick is a DOM Level 0 property. AddEventListener is part of the DOM Level 2 definition. Read about this : http://www.w3.org/TR/DOM-Level-2-Events/events.html
inline event handlers added as HTML tag attributes, for example:
Click me!
The above techniques are simple but have certain disadvantages: they allow you to have just one event handler per element. In addition, with inline event handlers you get very poor separation of JavaScript code from HTML markup.
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
Advatange of this : you can add multiple event handler. also separte html and javascript code
For more detail you can read this : Adding an Event Handler
The latter (addEventListener()) is the best way, as you can attach multiple events of the same type to the same element.
By assigning to onclick, etc, you will overwrite existing handlers.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
what does #someDiv mean?
i am doing this:
onmouseover="evt.target.setAttribute('opacity', '0.5'); $('#someDiv').show();" onmouseout="evt.target.setAttribute('opacity','1)'); $('#someDiv').hide();"
but i guess i need something called an ID selector?
anyway how do i make it so that when there is a mouseover the object, i get a little popup ?
$('#someDiv') is selecting the element with ID="someDiv", so selectors might not be your problem.
Apart from using the onmouseover event attribute, the code you provided should basically work. Are you seeing any JS errors, or have other debug results you could share?
Edit:
It's probably (maybe?) unrelated to your problem, but you should consider moving all the JS logic to a linked JS file instead of using the onmouseover property. jQuery's $('#your-selector').mouseover() method is a much better way to handle this. (http://api.jquery.com/mouseover/)