Trying to get JQuery to toggle

Trying to get JQuery to toggle
0.0 0

#1

Javascript line 316 and onwards… What am I doing wrong here? :disappointed_relieved:


#2

Can you explain what the problem is you are experiencing? What do you expect this code to do vs. what it actually seems to be doing?


#3

Sorry! I’m trying to toggle between fahrenheit and celsius. It’s going good from C to F but then back to C doesn’t happen for some reason. I’ve been trying a lot of solutions and kind of getting frustrated by it to be honest :face_with_hand_over_mouth:


#4

Hi, @J_RO please share your coding from editor. or share your image screenshot where you face problem. Happy Coding


#5

You have two issues.

#1) On line 320, make sure you are making a comparison. You are making an assignment.

if (currentUnit = "C"){

#2) Change your jQuery selector to target the input element and not the div, because it seems targeting the div containing the input causes the function to execute twice. Because of this, it ends up making the screen appear nothing changed.

The OP had already provided a link to their Codepen in the first post. Just click on the link for the code.


#6

Thank you! I didn’t even notice the equal sign missing.

Also learned something new about the div causing the function to cause twice. Can you tell me how you ‘debugged’ this? I didn’t see anything useful in the console which could have pointed me in the right direction.


#7

I added a console.log statement to test display the values that were being used in the function and noticed they were displaying twice. The issue has something to do with the label and not because you used a div for the selector per say. I am sure someone else will chime in with the answer as to why this happens.


#8

Hi,Tariqul
I have just finished the pen. Here is my link https://codepen.io/Alimama/pen/bLZdZM, have a look, hopefully my code colud help you solve your problem.


#9

@Alimama Instead of just posting your pen, it would be more helpful if you could respond directly to the OP’s questions.


#10

You are right, but I can not see any code there to help with, I would like to help and wish I was as experienced as you are.:sweat_smile:


#11

When I click on the Codepen link at the top of this page in the OP’s first post, I am taken to https://codepen.io/J__RO/full/jzmPPx/ where I can click on Change View to see the Editor View and view all the code. Also, I can right-mouse click on the full view and select view frame source to see the code also.


#12

Labels are clickable too!
html label

When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control.

… so you get 2 clicks :stuck_out_tongue:


#13

I had read that too, but since the target for the click event was the div and not the input or the label, I was still confused on how the label was factoring into the issue.


#14

Your comment really helped, thank you!

This JSFiddle showcases it by adding a counter. When you click the checkbox it adds only 1. When you click on the ‘click here’ label it registers as 2 clicks.
http://jsfiddle.net/vgWGT/15/

I didn’t use the label as the target for the click event but the switch it’s wrapping div so I’m still kind of confused but I guess I should just move on :face_with_hand_over_mouth:


#15

In case @randelldawson his reply wasn’t clear enough for you:

Keep it up! Eventually you and me, we’ll be as experienced as him and many others :slight_smile:


#16

Thank you and I hope so.:smile: