FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

a27-suryansh

@a27-suryansh

~~~

 <script type="text/javascript">
     $(document).ready(function() {

$(".clk_london_map2").on("click", function() {
$(".clk_london_map1").attr("src", "images/london_map2.png");
$(".clk_london_map2").attr("src", "images/london_map.png");
$(".clk_london_map2").attr("id", "clk_london_map2_changed");
});


     $("#clk_london_map2_changed").on("click", function() {

$("#clk_london_map2_changed").attr("src", "images/london_map2.png");

});

     });

```

Second click function is not working only god knows why

 $("#clk_london_map2_changed").on("click", function() {

$("#clk_london_map2_changed").attr("src", "images/london_map2.png");

});

Matej Bošnjak

@mbosnjak01

would need whole code, you got codepen?

a27-suryansh

@a27-suryansh

i have only this code for jquery

Stephen James

@sjames1958gm

@a27-suryansh $("#clk_london_map2_changed").on("click", function() { this code is likely running before the code above it so the id is not yet assigned to the element

@a27-suryansh Why not put that code at the bottom inside the .ready function?

a27-suryansh

@a27-suryansh

@sjames1958gm it is already under that

Stephen James

@sjames1958gm

@a27-suryansh Oops - never mind - it is there already - forget all I said

a27-suryansh

@a27-suryansh

@sjames1958gm i have heard that we cannot target elements with dynamically added classes is that right?

Stephen James

@sjames1958gm

@a27-suryansh I doubt that is the case, but there might be some timing issue.
Why are you targetting an element with #clk_london_map2_changed when you can already target it with ".clk_london_map2"

Unless this is some sort of experiment?

a27-suryansh

@a27-suryansh

no actually there are images of map in the web page and when user clicks on map2 then both maps should interchange that's why @sjames1958gm

@sjames1958gm there are only 2 maps

Stephen James

@sjames1958gm

@a27-suryansh Dang I should look closer did not see the 1 and the 2

a27-suryansh

@a27-suryansh

It interchanges one time but fails to interchange second time coz you know second click function is not working @sjames1958gm

Stephen James

@sjames1958gm

@a27-suryansh You cannot target a element when the id is added later. After you add the id to the element, then you can target it

a27-suryansh

@a27-suryansh

@sjames1958gm as you can see in my code i am first changing the class only then i am targeting it on the next click event

```

$(".clk_london_map2").on("click", function() {

this changes the id @sjames1958gm

i cant figure out what i am doing wrong @sjames1958gm

Stephen James

@sjames1958gm

@a27-suryansh
$("#clk_london_map2_changed").on("click", function() {
This code runs on page ready, before you have ever clicked and run the code above it.
You cannot reference an ID that is assigned later

a27-suryansh

@a27-suryansh

ok got it @sjames1958gm

Stephen James

@sjames1958gm

@a27-suryansh :+1:

a27-suryansh

@a27-suryansh

@sjames1958gm i think this code should be placed under the first click event right?

Damn @sjames1958gm

@sjames1958gm Works like a charm!

Stephen James

@sjames1958gm

:+1:

Timing is everything :)

a27-suryansh

@a27-suryansh

@sjames1958gm may god bless you i was stuck at it for hours

Markus Kiili

@Masd925

@a27-suryansh Don't insult him. HE is the one who blesses others here.

a27-suryansh

@a27-suryansh

@Masd925 he just blessed me that's why i asking god to bless him

Markus Kiili

@Masd925

@a27-suryansh He is the brownie god, so that is why it insults him.

a27-suryansh

@a27-suryansh

you mean to say even god can't bless him now @Masd925

Markus Kiili

@Masd925

@a27-suryansh It depends on how many brownies that god in questions has.

a27-suryansh

@a27-suryansh

infinite @Masd925

Markus Kiili

@Masd925

@a27-suryansh That is hard to swallow. Are we assuming that string theory holds?

Stephen James

@sjames1958gm

@a27-suryansh You're welcome.

a27-suryansh

@a27-suryansh

@Masd925 i am not aware of that theory but seems interesting

@sjames1958gm i have made a codepen for that issue and putting the click code under that has created new issue - https://codepen.io/anon/pen/KoRBWp please have a look at it

@sjames1958gm interchaning works for 2-3 clicks then it stops

a27-suryansh

@a27-suryansh

@sjames1958gm the second click function under the click function is the reason it is not changing the image after 2-3 clicks but if i move the second click function out of the first click function then it doesn't works coz as you said it is unable to reference the element but now what is the solution?

Stephen James

@sjames1958gm

Rather than move around click handlers, let your data determine what happens with a single handler.

  var pics = ["http://www.youloveit.ru/uploads/posts/2013-11/1385565011_youloveit_ru_sobaka_bu02.jpg",
             "https://www.what-dog.net/Images/faces2/scroll001.jpg"];
  var pic1ndx = 0;
  var pic2ndx = 1;
  $(".clk_london_map2").on("click", function() {
    $(".clk_london_map1").attr(
      "src",
      pics[pic1ndx]
    );
    $(".clk_london_map2").attr(
      "src",
      pics[pic2ndx]
    );
    pic1ndx = (pic1ndx + 1) % pics.length;
    pic2ndx = (pic2ndx + 1) % pics.length;
  });

a27-suryansh

@a27-suryansh

Thanks for this @sjames1958gm

CamperBot

@camperbot

a27-suryansh sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:

:star2: 9157 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm

Stephen James

@sjames1958gm

@a27-suryansh Sure. Assigning and re-assigning click handlers can get really complex quickly

Where communities thrive

People

Repo info

Activity