You cannot use the "this" keyword outside of a class body

Question

You cannot use the "this" keyword outside of a class body

I am facing an issue with my function, can someone help me? Here is the code:

function remove_multi_leg(): void  {
  if (Number($("#search_no_legs").val()) < 2) {
    return;
  }

  const removeId: number = Number($(this).attr("data-number"));
  const highestId: number = Number($("#search_no_legs").val());

  if (removeId === highestId) {
    $(`#multi_leg_${removeId}`).hide();
    $("#search_no_legs").val(highestId);
    return;
  }

  let i: number;
  let end: number;
  let asc : boolean;
  for (i = removeId, end = highestId, asc = removeId <= end; asc ? i <= end : i >= end; asc ? i += 1 : i -= 1) {
    $(`#search_legs_${i}_origin_text`).val($(`#search_legs_${i + 1}_origin_text`).val());
    $(`#search_legs_${i}_origin_id`).val($(`#search_legs_${i + 1}_origin_id`).val());
    $(`#search_legs_${i}_destination_text`).val($(`#search_legs_${i + 1}_destination_text`).val());
    $(`#search_legs_${i}_destination_id`).val($(`#search_legs_${i + 1}_destination_id`).val());
  }
  $(`#multi_leg_${highestId - 1}`).hide();
  $("#search_no_legs").val(highestId - 1);
  return;
}

I encountered a strange error while running Codacy analysis on this code. Here are the details:

the "this" keyword is disallowed outside of a class body

The error seems to be in this line:

const removeId: number = Number($(this).attr("data-number"));

Can anyone suggest how I can resolve this issue?

javascript jquery typescript codacy

Answer 1

Answer №1

To make the function more efficient, you can modify it to avoid using this by accepting an argument and utilizing the argument's currentTarget property like this:

function update_single_item(event: Event): void {
   const target = $(event.currentTarget);
   // ...
   const itemId: number = Number(target.attr("data-id"));
   // ...
}

(The parameter type for event could be specified as MouseEvent, especially for a click event, which includes x and y properties.)

currentTarget and this typically point to the same element in a DOM event handler; it represents the element where the event was triggered (in contrast to event.target, which might be a child of the targeted element).

Answer 2

To make the function more efficient, you can modify it to avoid using this by accepting an argument and utilizing the argument's currentTarget property like this:

function update_single_item(event: Event): void {
   const target = $(event.currentTarget);
   // ...
   const itemId: number = Number(target.attr("data-id"));
   // ...
}

(The parameter type for event could be specified as MouseEvent, especially for a click event, which includes x and y properties.)

currentTarget and this typically point to the same element in a DOM event handler; it represents the element where the event was triggered (in contrast to event.target, which might be a child of the targeted element).

You cannot use the "this" keyword outside of a class body

Answer №1

Similar questions

Learn the process of eliminating a class utilizing this JavaScript function

"Typescript throws a mysterious 'Undefined value' error post-assignment

Discovering the functionality of detecting the pressing of the "enter" key within an input field that triggers the next button in Internet Explorer versions 8 through 10

Methods used on a server and methods used on a client-side application

Upon clicking, choose a specific todo ID

Efficient method for quickly updating the color scheme of a grid of squares in JavaScript

How can I prevent the sidebar from sticking to the footer?

Tips for Creating JavaScript Code for HTML Helpers in ASP.NET MVC

Is there a way I can turn off the dragging functionality in my situation?

Issue with second button in Angular Onclick() not been resolved

What is causing this JavaScript function to output '2'?

How to Condense an Element Using Position: Absolute

I encountered an issue while attempting to include Access-Control-Allow-Origin in my WCF library Project

Enhance user experience with a dynamic Bootstrap combo box that updates based on

What benefits are there to converting a jQuery application to Angular?

CdkVirtualFor does not display any content

Shut down jquery modal

JavaScript Navigation Bar Error: The value of 'undefined' is not recognized as an object

Converting JSON data into a Backbone Model

Tips for modifying the background color of all elements ahead of the element I have selected within a grid