my question is a short one but I couldn't figure it out by myself. I've got a function like -> http://jsfiddle.net/gtU56/ . I'm calling a javascript-function with an event-listener(onclick) in my html-code. The function itself is more complex but I need the last snippet. By clicking 'Show More' the text should change. Why won't the text change?
Because the toggleText function isn't available when the html code is rendered.
In other words the function isn't set until the page is ready so the onclick function doesn't reference anything.
Either have the function like here http://jsfiddle.net/gtU56/2/
or have it in the head of the page because its needs to be ready immediately
If you want it to wait for the ready state you can do the following and remove the onclick action all together
http://jsfiddle.net/gtU56/7/
$(".text").click(function()
{
$(".text").toggle();
});
toggleText = function () {
$('.text').toggle();
}
check here http://jsfiddle.net/gtU56/3/
It's because of how you're loading the function. Switch it from onLoad to no wrap (head) and it works fine.
jsFiddle example
Using jsFiddle's onLoad wraps your function in a window.onload call like this:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
function toggleText() {
$('.text').toggle();
}
});//]]>
</script>
While no wrap (head) just adds it normally like this:
<script type="text/javascript">
//<![CDATA[
function toggleText() {
$('.text').toggle();
}
//]]>
</script>
since you are already claiming having jquery, you need not use inline javascript. try this
var elems = $('.text');
elems.click(function(){
elems.toggle();
});
fiddle : http://jsfiddle.net/gtU56/5/
$('.text').click(function() {
$('.text').toggle('slow', function() {
// do your animation..
});
});
Js Fiddle
This is the solution - http://jsfiddle.net/gtU56/6/
You need to first make sure that the function is registered after page load. Then, bind a click event to the div.
Hope this helps!
First you should organize you jQuery code like this:
$.(document).ready(function() {
// enter jQuery code here
});
Otherwise you're accessing a not completly loaded html document.
Also, you don't need the event-listener if you are using jQuery.
This should work for you:
$.(document).ready(function() {
$('.text').click(function() {
$(this).toggle();
});
});
Is very easy. You can use ID or CLASS.
onclick="$('NAME ID or CLASS').toggle(ANIMATION or DURATION);"
<div>
<div class="text" onclick="$('.text2').toggle(400);">Show More</div>
<div class="text2" style="display:none">Show Less</div>
</div>
Related
I am new to Javascript and I am wondering on the behavior below.
Consider the working code below:
<div><br/><strong>Click Me!</strong></div>
<script>
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo('fast',1);
});
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
</script>
But this one does not work:
<div onmouseover="fade()"><br/><strong>Click Me!</strong></div>
<script>
$(document).ready(function(){
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
function fade(){
$(this).fadeTo('fast',1);
}
</script>
Why is the second one not working when all I did was use inline eventhandler and function?
Thanks in advance!
First, I wouldn't do this. Switching from using modern event handling to onXyz attributes is a bit backward. See below the fold for more.
But answering the question of why it didn't work: this within the call to fade in your second example is not the div (it's the global object, aka window on browsers). You'd have to change your onmouseover to:
onmouseover="fade.call(this)"
...for this to be the div during the call.
(Separately, note that you used onmouseover in the second code block but mouseenter in your first code block. I've left it as onmouseover, but you probably wanted onmouseneter instead.)
Example:
$(document).ready(function(){
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
function fade(){
$(this).fadeTo('fast',1);
}
<div onmouseover="fade.call(this)"><br/><strong>Click Me!</strong></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Or alternately, just pass this in as an argument and change fade to use it:
$(document).ready(function(){
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
function fade(element){
$(element).fadeTo('fast',1);
}
<div onmouseover="fade(this)"><br/><strong>Click Me!</strong></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But again, I wouldn't use an onXyz attribute; if you don't want the handlers in a ready callback, they don't need to be, but that doesn't mean you have to switch to using attributes for event hookup. Instead:
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
$('div').mouseenter(function(){
$(this).fadeTo('fast',1);
});
Example:
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
$('div').mouseenter(function(){
$(this).fadeTo('fast',1);
});
<div><br/><strong>Click Me!</strong></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
You use document.ready because you don't know if the nodes you're trying to effect have been rendered yet.
Scripts are executed in-order on the page. So if you have more divs below your script definition they're not going to match in $("div").
Since scripts are typically included in the header, you totally need document.ready if you want JavaScript to see all the nodes initially.
In your example you don't need document.ready per se. The error is elsewhere.
<div>1</div>
<script>
console.log($("div").length); // 1
$(document).ready(function () {
console.log($("div").length); // 2
});
</script>
<div>2</div>
I have a button where I am trying to add on click jquery as below
<button onclick="myFunction()">YES</button>
And
$(document).ready(function() {
function myFunction(){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
}
})
However, on click I am getting Uncaught ReferenceError: myFunction is not defined
What am I doing wrong and how to fix this?
Updated with a sample jsfiddle
http://jsfiddle.net/3aC7W/1/
What am I doing wrong and how to fix this?
You are defining the function inside another function, i.e. the function is not defined in global scope and hence cannot be found by the inline event handler.
Just remove $(document).ready(function() { because you don't need it there:
function myFunction(){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
}
You only have to use $(document).ready(function() { ... }); if you manipulate the DOM, and also only if you place the script before the elements in the HTML document.
The better solution of course would be to bind the event handler with jQuery (and not use inline event handlers):
$(document).ready(function() {
$('button').on('click', function(){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
});
});
You might have to add a class or ID to the button to make the selector more specific. Have a look at the list of available selectors.
change your code to this way to achieve click :
<button id="myFunction">YES</button>
and
$(document).ready(function() {
$('#myFunction').click(function(e){
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
});
});
check it at: http://jsfiddle.net/aneesh_rr/XJ758/3/
change your code to this:
$(document).ready(function() {
window.myFunction = function(){ //you should make myFunction avaliable in global
$('#mycheckboxdiv').toggle();
$("div#headersteptwo").addClass("hidden");
}
})
So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?
The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here
$(document).on('click', '#t1', function() {
froth();
});
I am trying to change the background image of a link when it get clicked. I keep getting the error that you cannot call 'click' on null.
JQuery (in the header)
<script type="text/javascript">
$('a.upvote-arrow').click(function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
</script>
HTML
<div class="top-comment-vote">
</div>
Thanks
Try adding $(document).ready:
<script type="text/javascript">
$(document).ready(function(){
$('a.upvote-arrow').click(function(){
$(this).css('background-image','url(../images/icons/up-arrow2.png)');
});
})
</script>
Are you sure this script is being loaded after the html is in the DOM?
Try wrapping what you wrote in a onload closure.
$(function() {
$('a.upvote-arrow').click(function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
});
Another thing you can do is take advantage of delegation for the event registration.
$('body').on("click", ".a.upvote-arrow", function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
This binds it to the body instead.
Try wrapping your script with document.ready; I suspect that you're script might be running before your entire page loads.
I am using this:
$('#myLink').click(function () {
$('#MainDIV').empty();
});
Where:
<div id="MainDIV">
<fb:like href="somelinketc">....</fb:like>
</div>
I need everything inside <div id="MainDIV"> to disappear but I'm checking firefox and it's all still there.
Try it in this way.
$(document).ready(function(){
$('#myLink').click(function(){
document.getElementById('MainDIV').innerHTML="";
});
});
I think this is an easy way to overwrite the existing data in the element in which you want to make it disappear or change the contents according to your requirements.
There's an error in your .click() function. It should end with the parenthesis like this:
});
and not like this:
)};
Should fix it.
You should be preventing the click action of the link with preventDefault()
$('#myLink').click(function (e) {
e.preventDefault();
$('#MainDIV').empty();
});
Also I am not sure but your post above has a typo. )} should be }).
$("#MainDIV").html('');
That'll clear all the contents of the div.
$('#myLink').click(function () {
$('#MainDIV').hide(1);
)};