Coffeescript consistently compiles indented code beyond the function scope

This is an example of Coffeescript compiling the code below

$ ->
    $("#debug").val "hey"
    for i in [0..3]
        m = new Message(5,5)
        text = "<div>#{m.message[m.message_id]}</div>"
        $("body").append(text)

which transforms into:

  $(function() {
    return $("#debug").val("hey");
  });
  for (i = 0; i <= 3; i++) {
    m = new Message(5, 5);
    text = "<div>" + m.message[t.message_id] + "</div>";
    $("body").append(text);
  }

The "for" loop is placed outside the jQuery load function. This formatting strange is causing confusion. What could be wrong with my indentation technique?

Answer №1

Could it be that you are combining tabs and spaces for your indentation? If your CoffeeScript code looks like this (where <tab> represents a single tab character):

$ ->
    $("#debug").val "hey"
<tab>for i in [0..3]
        m = new Message(5,5)
        text = "<div>#{m.message[m.message_id]}</div>"
        $("body").append(text)

Chances are the mixed spacing is causing the unexpected output, especially if your tab-spacing is set to 4.

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

Is there a way to convert my validation function into an AJAX method?

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); f ...

Ways to organize an array based on various characteristics

I am seeking assistance regarding grouping in Javascript. Below is an array where each item has either is_sweet, is_spicy, or is_bitter set to true: const foodsData = [{ name: 'mie aceh', is_sweet: false, is_spicy: true, ...

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

I'm facing an issue where I have a view (such as Index.cshtml) and a page model (like Index.cshtml.cs). In the view, there's a JavaScript function that I want to call from the OnPost() method in the page model. I tried using ScriptManager for thi ...

Having trouble publishing project on Vercel because of a naming issue

Whenever I try to deploy a project on vercel, I encounter an error stating that the project name is not valid. The specific error messages are as follows: Error: The name of a Project can only contain up to 100 alphanumeric lowercase characters and hyphe ...

Create a JavaScript function to calculate a 2-tailed t distribution by adapting an already existing method

Can someone help me with implementing a two-tailed t-test in JavaScript? Resource: Student's t distribution in JavaScript for Google Spreadsheet I have taken a potential solution from the link and customized it to function outside of the form: func ...

What is the best way to enhance the capabilities of a current tinyMCE button?

I am interested in enhancing the capabilities of the default buttons in tinyMCE by adding additional functionality. I'm curious to know how this can be achieved. For instance, If I would like the paste button not only to paste content, but also perf ...

Ways to access the specified variable in JavaScript

How can I get to the header of a variable? For example, in the Redux Framework WordPress plugin, there is a variable [redux.args.opt_name]. How do I find the define line for this variable? Another Question: What does the use of two single quotes in the &a ...

The data stored in a FormGroup does not automatically transfer to FormData

I am currently facing an issue with uploading multi-part data to my API. To achieve this, I have created a FormData object for the upload process. Initially, I gather all the necessary user input data such as an image (file) and category (string). These va ...

Can custom information be incorporated or shown for the specific area or mesh that is clicked on a rendered GLTF model?

I have a 3D model rendered using three.js, and I've managed to make it so that when you click on a part of it, that area turns red. However, what I want to do is not only highlight the clicked area but also display information about it in a modal wind ...

Upon returning from a different page, data on the Vue.js form page is unexpectedly lost

On my Vue.js page, there is a large textarea element. However, I am facing an issue where if the user taps on "Settings," opens the Settings page and then goes back to the original page, all of the data in the textarea disappears. I am looking for a soluti ...

How to retrieve the URL of the previous page in Angular 2

My scenario involves two components: Customer and Shipment. When a user navigates from the Shipment component to the Customer component, I want the Customer component to redirect back to the Shipment component. To achieve this, I am using the following me ...

Leveraging Angular to retrieve images from Google Feed API

I'm currently working on developing an RSS reader and trying to integrate images from the Google Feed API. While I have successfully extracted the publishedDate and contentSnippet, I am facing difficulty in getting the image src. The code snippets bel ...

Using Vue.js to dynamically append varying inputs upon user interaction

When I select an option, I want to display different types of inputs based on the selected option. For Example: Select input -> show input fields Select textarea -> show text areas Select boolean -> show radio buttons The Code This is where ...

Ways to insert a line break using ajax

document.getElementById("msg").innerHTML += "<strike>b:</strike> "+ msgs[i].childNodes[1].firstChild.nodeValue; After retrieving the messages, I noticed that they are all displayed close to each other. Is there a way to display each message on ...

Steps to retrieve hexadecimal addresses sequentially

Can anyone recommend a module or script that can generate sequential 64-bit hex addresses like the following: 0000000000000000000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000000000000000001 00000000000 ...

What is the best way to hide a form box and button after clicking a button?

I'm creating a simple form in HTML and JavaScript where users can input their name and have it displayed. My goal is to hide the form and button once the user submits. <form> <br/>Please enter your name: <input type="text" id="name ...

The search text box is mysteriously absent from each column in the datatables

I am utilizing jQuery Datatables to construct a table with data retrieved from MySQL. This is how my table appears: LOT_LOCATION, Zone Attribute, LOTID, Design_ID, Board_ID1, QA_WORK_REQUEST_NO, QA_CONTACT_NAME, QA_PROCESS_NAME, CURRENT_QTY, Date, Temp ...

An illustration using Three.js

Could someone please guide me on extracting the threejs.org example showcased at this URL: . ...

Showing code snippets with possible markup or malicious content as plain text strings

I am facing a challenge with a table on my webpage where values are added through a textbox in a popup modal. However, when I try to add the string ); to the textbox, it triggers a popup instead of being displayed innocuously in its original format on the ...

Incorporating React into HTML (bypassing create-react-app setup)

Currently, I am attempting to follow the React Documentation (https://reactjs.org/docs/add-react-to-a-website.html) on integrating React into a website. The code snippet from main.html is as follows: <!DOCTYPE html> <html> <head> ...