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

The only time an effect is triggered is when calling the same function simultaneously with different parameters in React's useEffect

Introducing my latest creation - the "CommonStyleGenerator" component. This nifty tool generates a simple style object with properties such as height, width, and background color. The best part is, whenever there is a change in any of the text fields withi ...

javascriptreactjsreact-nativefunctionuse-effect

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango

"Execution of the console.log statement occurs following the completion of the request handling

When I have a piece of middleware that responds if no token is found, why does the console.log line still run after the request is responded to? I always believed that the res.json call would "end" the middleware. Any insights on this behavior would be g ...

javascriptnode.jsexpress

Triggering a function without the presence of an actual event

I need to come up with a solution for reusing a function triggered by an event binding. This problem stems from browsers remembering checkbox states, which is why I have to call the function on document load. One approach could involve wrapping setGrid() ...

javascript

What could be causing my onscroll function to cut off before reaching the end of the element?

Struggling with a function I created to slide a div horizontally into view in the center of a vertically scrolling page. It seems to work well under normal conditions, but when the page is scrolled quickly, it sometimes fails to complete the horizontal mov ...

javascript

Submit data from one form to another form located within an iframe

I am currently using a JX Browser that allows content to be displayed in an iframe. My goal is to automatically transfer the username and password of a user logging into my ticketing software to another form within an iframe. The page within the iframe is ...

javascriptphpjqueryhtmliframe

Is there a way to automatically add a div to the window as the user scrolls and then hide the div when they scroll back to the

Seeking assistance with creating a function that will add a 'sticky' class to the menu when the user scrolls down to the middle, and then append a div when the 'sticky' class is present. Currently facing issues where the div keeps appen ...

javascriptjqueryhtmlcss

Changes on services do not affect the Angular component

Currently facing an issue with my Angular assignment where changing an element's value doesn't reflect in the browser, even though the change is logged in the console. The task involves toggling the status of a member from active to inactive and ...

javascripthtmlangulartypescript

Controlling the document object model of a third-party website within the Electron framework

I am completely new to electron. My main goal is to load a URL and then execute some Javascript that will make changes to the DOM. Currently, my approach involves creating a BrowserWindow that loads the URL, and I understand that I can utilize webContents ...

javascriptnode.jselectron

What are the steps to send AJAX data before closing the page?

Trying for over 7 hours to send a value to the database when the user closes the page, like online and offline. Still struggling to find a working solution. <script tysssspe="text/javascript"> //ST window.onbeforeunload = function(){ var user_st = ...

javascriptphpajax

Leveraging Angular Dragula without the need for RequireJS

I'm eager to incorporate Drag and Drop functionality into my Angular project with the help of the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it appears that this module heavily relies on RequireJS. My experience wit ...

javascriptangularjsrequirejsdragula

Javascript: regular expression to validate alphanumeric and special characters

Looking to create a regular expression for a string (company/organization name) with the following conditions: No leading or trailing spaces No double spaces in between Shouldn't allow only a single character (alphanumeric or whitelisted) Can start ...

javascriptregex

Is there a way to export a modified OBJ geometry from a Three.js scene?

Every time I make changes and export my Three.js scene with a SkinnedMesh model, the original imported model gets saved instead of the updated version. Despite rotating bones and adjusting morph targets, the exported model remains unchanged. Even though t ...

javascriptthree.jsgeometryexport

Incorporate validation features within a jQuery method

I am struggling with some HTML and jQuery code that generates links based on user input. HTML <input type="text" id="text" placeholder="Enter text" autofocus /> <a id="link1" class="btn btn-info" href="#" target="_blank"> Search 1 </a> ...

javascriptjqueryhtmlvalidationip-address

How can I configure Vue 2 using Vue CLI to access and utilize images stored in the src/static directory?

I'm in the process of bundling my Vue CLI application to include src/static/xyz.png so that I can easily reference it as /static/xyz.png. Unfortunately, the documentation provided by Vue doesn't offer clear instructions on how to achieve this. I ...

javascriptvue.jswebpackvuejs2

Sending blank AJAX data to a PHP function

I am facing a challenge where I need to utilize AJAX to send the ID of an element and a specific value (1,2,3) to a PHP document for validation. Despite successfully logging both values in the console, the PHP file always returns that the data is empty. ...

javascriptphpjqueryajax

Is there a way to programmatically prevent the back button from functioning if the previous route pathname in React was 'Login'?

When it comes to navigating back on previous pages, the traditional back button is typically used instead of relying solely on the navigation bar. However, I am currently looking to disable this feature specifically when the next previous route in line is ...

javascriptreactjsreact-router

Discovering the maximum value and fetching it from an array

Can you help me identify the array element with the highest 'conversion' value? var barTextData = [ { term: "Roof", clicks: 11235, conversion: 3.12 }, { term: "Snow", clicks: 6309, conversion: 4.45 }, { term: "Chains" ...

javascript

Reboot the node.js server

As I delve into learning node.js, I decided to start with a basic example in a file named server.js: var http = require("http"); function onRequest(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("it&a ...

javascriptnode.js

Is iterating over an array of objects the same as avoiding repetitive code?

Update: Incorporating JavaScript with the three.js library. To streamline our code and prevent repetition, we utilize loops. However, in this specific scenario, the for loop is not functioning as expected compared to six similar lines that should achieve ...

javascriptthree.js