Using jQuery to change the background image - javascript

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.

Related

onload not working when using jquery append

I need to fire the script when elements are loaded via ajax and appended to the DOM.
here is HTML
<div id="one">
<p>one</p>
<button>Append</button>
</div>
and here is javascript
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p onload='myalert();'>two</p>";
$('#one').append(s);
})
function myalert() {
alert('ok');
}
The alert will never fire. How to catch the event when elements are fully loaded?
Here is codepen sandbox for playing around: https://codepen.io/xguntis/pen/rQERmW
You can't use the onload event there. Why not just have the alert statement at the end of your event handler?
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p>two</p>";
$('#one').append(s);
alert('ok');
})
try this..
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p id='twoP' >two</p>";
$('#one').append(s).ready(function(){
alert('ok');
});
})
this will load the element then will fire the call back
I tried to fix your issue.
So I found a way to fix your problem.
This is my code
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p>two</p>";
$('#one').append(s).ready(function(){
alert('ok');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div id="one">
<p>one</p>
<button>Append</button>
</div>

onClick eventlistener in JS without using onclick function in HTML

I have a html file and js file I want to execute JS when a button is clicked in html. for this I can use onclick event in html but the condition is that I should not modify the HTML file.
I tried to add eventlistener in my JS but that didn't worked.
<p align=center>
<button class="stdbutton" id=button2 name=button2>
Click Me
</button>
</p>
$("button2").click(function() {
alert("button2 clicked");
});
please see the fiddle link for further reference: http://jsfiddle.net/gqpr0g9w/
thanks in advance
Try the FIDDLE,
Basically the first issue with your fiddle was you are using js library other than jquery. Jquery code won't execute without referencing the jquery library.
Secondly you are using an invalid selector,
$("button2")
you can replace this with an id based selector (# selector) as per your markup
$("#button2")
And finally try wrapping the code under jquery closure under document ready event that will ensure that the event will attach when the related object is loaded on the browser.
Finally will becomes
$(document).ready(function() {
$("#button2").click(function() {
alert("button2 clicked");
});
});
Hope it works for you..
Include jQuery in your jsfiddle. Use one of the below to attach an event listener for click using jQuery
$("#button2").on("click", function() {
alert("button 2 clicked");
});
or
$("#button2").click(function() {
alert("button2 clicked");
});
case jQuery is included in the html:
js file -
$("#button2").click(function() {
alert("button2 clicked");
});
// notice the # symbol before the word "button2" representing that we are looking for an ID
case jQuery is NOT included in the html:
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
jQuery script must first be included
and then you can execute the same code as shown above.
Well, you are trying to use jQuery, but there is no jQuery included in your html-File. In fact there is no script included in your html at all like
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
I don't think you will be able to do that without modifying the html-file.

How do I change the color of an element via jQuery?

This is driving me crazy. I think I have everything right but I am unable to change the color via jQuery. I first was doing this locally then I thought that jQuery can't be used locally, which I learned was incorrect but to make it work I uploaded to my server and it still doesn't work.
What am I doing wrong?
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$("p").css('color', 'blue');
</script>
<p>Hello</p>
</body>
</html>
You only forgot to wrap your code inside DOM ready handler
$(document).ready(function(){
$("p").css('color', 'blue');
})
See it Working here
Put your code inside
$(document).ready(function() {
$("p").css('color', 'blue');
});
WORKING DEMO
.ready()
Description: Specify a function to execute when the DOM is fully
loaded.
$(document).ready(function() {
$("p").css('color', 'blue');
});
Try this code .Refer
JS:
$(document).ready(function() {
$("p").css('color', 'blue');
});
Wrap it in document.ready function, Like this,
$(document).ready(function() {
$("p").css('color', 'blue');
});
The above solutions are perfect here is the reason why ? ?
in java script every function is called when event occurs in jquery the first event is on load event when the the code is ready to execute ready event is fired all the functions have to be called with in these ready event only

Toggle text with function called with onclick

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>

JQuery: How can I extend a script over some dynamically loaded content?

I have a little problem that I was hoping some of you could help me out with.
On clicking a button, I would like to update a div with the content of another page.
Let's say that homepage.html is like this:
<html>
<head>
<script type="text/javascript" src="JQUERY.JS"></script>
<script type="text/javascript">
$(function()
{
$(".alert").click(function()
{
alert("HELLO");
return false;
});
$(".load").click(function()
{
$("#content").load("FILE.HTML");
return false;
});
});
</script>
</head>
<body>
CLICK ME
<div id="content"></div>
</body>
</html>
A rather simple file.
Now let's say that FILE.HTML has this line only:
CLICK ME
Now what I am looking for is: when i click .alert, the alert box pops up. I don't know why it doesn't.
So my question is: why is my loaded code not affected by the script?
Thank you for your help.
You need to use the jQuery Delegate to achieve that...
The contents from file.html are not present the moment you attach the click event to the ".alert" items (actually there are no .alert items when that code runs!).
You need to use jQuery's delegate or live methods which use event bubbling in order to capture events not only from existing elements but also from new elements that are inserted in the DOM later.
This also has the nice side effect of using only one event handler instead of one for each .alert element.
You have to use $.live:
$(".alert").live('click', function()
{
alert("HELLO");
return false;
});
You don't have to wait until you add in your dynamic content, this function applies your event handler to all future elements that match your selector.

Categories