CoffeeScript is failing to run the code

I'm attempting to use a click function to alter the CSS code and then run a function. Here is my current code:

ready: ->
   $("#titleDD").click ->
     $("#titleDD").css('text-decoration', 'underline');
     $("#catDD").css('text-decoration', 'none');    
   $("#catDD").click ->
     $("#catDD").css('text-decoration', 'underline');
     $("#titleDD").css('text-decoration', 'none'); 
     `console.log("hello2");`
     `console.log("hello");`

Upon running the code, hello2 and hello are immediately displayed in the console once the webpage loads. However, when I click on #catDD, neither hello nor hello2 are printed, and the text-decoration of titleDD does not change. Can someone explain why all of the code is not being executed? Thank you.

javascriptcoffeescript

Answer №1

Attempt:

ready: ->
   $("#titleDD").click ->
     $("#titleDD").css('text-decoration', 'underline');
     $("#catDD").css('text-decoration', 'none');   
     return 
   $("#catDD").click ->
     $("#catDD").css('text-decoration', 'underline');
     $("#titleDD").css('text-decoration', 'none'); 
     console.log "hello2"
     console.log "hello"
     return
   return

Creates:

  ready: function() {
    $("#titleDD").click(function() {
      $("#titleDD").css('text-decoration', 'underline');
      $("#catDD").css('text-decoration', 'none');
    });
    $("#catDD").click(function() {
      $("#catDD").css('text-decoration', 'underline');
      $("#titleDD").css('text-decoration', 'none');
      console.log("hello2");
      console.log("hello");
    });
  }

(I'm particular about the structure in coffeescript to avoid unnecessary JavaScript code, nobody wants to see return console.log("hello"); at the end of a function)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to refresh a specific component or page in Angular without causing the entire page to reload

Is there a way to make the selected file visible without having to reload the entire page? I want to find a cleaner method for displaying the uploaded document. public onFileSelected(event): void { console.log(this.fileId) const file = event.targe ...

javascriptangulartypescriptroutesangular2-routing

What is the value of x in the equation 2 raised to the power of x equals 800

Similar Question: What is the reverse of Math.pow in JavaScript? 2^x=i If i is given, how can we determine x using Javascript? ...

javascript

Create artwork by drawing and adding text to an image before saving it

I am looking to enhance my website by adding a feature that allows users to draw on images hosted on the server. Additionally, I want users to have the ability to add text to the image and save their edits as a new picture. While it may seem like a simple ...

javascriptimagecanvasdrawing

How do I make the YouTube Grid Gallery player show up in a pop-up window?

I have been experimenting with the following code: <head> <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> <script type="text/javascript"> function loadVideo(playerUrl, ...

javascriptcsspopupyoutubegallery

When attempting to evaluate JSON data on a specific computer, the function JSON

Something strange is happening and I can't seem to figure it out, causing a big issue for me. I am currently working on a .Net web application that utilizes JSON (not json2) along with other JS libraries. In one specific proxy, the function JSON.eval ...

javascriptjsoninternet-explorerjscript

Modify the content in the v-navigation-drawer upon clicking

I am currently working on a project with a v-navigation-drawer and two buttons. The first button is designed to open the drawer, while the second one should change the content of the drawer without closing it. I want the content to update instantly without ...

javascriptvue.jsvuetify.jsv-navigation-drawerv-btn

When a user clicks a button, modify a section of the URL and navigate to

I've been searching everywhere for a solution to this issue, but I just can't seem to find it. I'm hoping someone here can help me out. In a bilingual store, I need a way to redirect users to the same product on a different domain when they ...

javascriptphpjquery.htaccess

Striking a balance between innovation and backward compatibility in the realm of Web Design/Development

Creating websites is my passion, and I enjoy optimizing them for various platforms, devices, and browsers. However, lately, I've been feeling frustrated. I'm tired of facing limitations in implementing my creative ideas due to outdated technolog ...

javascripthtmlcss

Executing a function without using the eval() function

I am currently working on a JavaScript code that relies heavily on the eval function. eval(myString) The value of myString is equal to myFunc(arg), and I would like to find a way to call myFunc directly instead of using eval. Unfortunately, I have no co ...

javascripteval

AJAX: Learn how to execute an AJAX call using a JavaScript function

Is there a method to determine (using developer tools like Chrome, Firefox, Opera, etc) the most recent function that triggers an AJAX call? This could be helpful for debugging web applications. Appreciate your help ...

javascriptajaxdebugging

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

javascriptjqueryhtmlcssweb

The functionality of changing the checkbox to "checked" by clicking on the span is not

How can I create a toggle button with a checkbox using css and jquery? Clicking on the span representing the toggle button should change the checked property of the checkbox. Currently, the span does not change the property, even though it triggers the c ...

javascriptjqueryhtmlcss

Automating the selection of a drop down based on a condition in Angular 2: A step-by-step guide

I'm facing an issue with a drop-down menu where no default value is selected. On my homepage, I need to automatically select an option based on query parameters. I've attempted various methods but none have been successful. Below is the code snip ...

javascriptangularangular5

Securely encoding information with PHP and decrypting it using JavaScript

I'm currently working with 2 servers. My goal is to generate a pair of keys, store the private key in local storage, and send the public key to my PHP server. The main objective is to encrypt data using the public key in PHP and decrypt it using Jav ...

javascriptphpnode.jsrsapublic-key-encryption

What is the best way to pass parameters to a PHP script using AJAX to ensure they are properly processed on the server side?

I'm working with the following function: function myFunction () { $.getJSON('remote.php', function(json) { var messages = json; function check() { ... In this function, I call the remote.php script which e ...

javascriptphpjqueryajax

How to automatically redirect empty routes to a specific route in Next.js

When visiting a non-existent endpoint in Next.js, I receive a 404 error. What I actually want is for all unused routes to automatically redirect to a default route; specifically, the landing page. I've spent more than an hour trying to figure this ou ...

javascriptnext.js

Perhaps dividing numbers with regular expressions

My HTML textarea allows users to input numeric serial numbers in various formats - either inline, separated by any character, or in columns from an Excel file. The serial codes are either 14 characters long if the first character is "1," or always 15 char ...

javascriptjqueryhtmlregex

A guide on sorting an array based on elements from a different array

We are currently in the process of developing an application using Vue and Vuex. Our goal is to display a list of titles for venues that a user is following, based on an array of venue IDs. For instance: venues: [ {venue:1, title: Shoreline} {venue:2, ti ...

javascriptarraysvue.jsgoogle-cloud-firestore

The dimensions of the d3 div remain constant despite any modifications to its attributes

In my angular application, I am trying to customize the width and height of div elements in d3 when I select a legend. Strangely, I am able to adjust the width and height of the svg element without any issues. Here is the issue illustrated: Below is the c ...

javascriptangulartypescriptd3.js

What are the steps to integrate <br> in a JavaScript code?

I have recently started learning about web development and I'm facing a challenge with this implementation. var obj = [[{ name: "John", age: 30, city: "New York"}, { name: "Ken", age: 35, city: "New Orleans"}]]; ...

javascripthtmlangular