Value of an object passed as a parameter in a function

I am trying to use jQuery to change the color of a link, but I keep getting an error when trying to reference the object.

Here is my HTML :

<a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav">Locations</a>

And here is my JS code:

function loclink(a){
    a.css("color", "red"); // This did not work
    jQuery('a').find('.nav-link').css("color", "red"); // This also did not work
    $(a).find('.nav-link').css("color", "red"); // And this did not work either

console.log(a):

<a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav">Locations</a>

Answer №1

function changeColor(a){
    $(a).css("color", "red"); // this should work
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onmouseover="changeColor(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav">Locations</a>

A more effective method (instead of using inline events) is to utilize Jquery.on to link an event handler to your links

$("a.nav-link").on("mouseover",function (){
    $(this).css("color", "red"); // this should work
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a  href="locations.html" title="Locations" class="nav-link align_nav">Locations</a>

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

"Sending image data in base64 format to a server: A step-by

Instead of directly selecting an image, I decided to dynamically display it using base64 encoding. <img style="width: 412px;" src="data:image/gif;base64,R0lGODlhwAAAAXAAACH5BAEAAPwALA Is there a way to send this image to a server without triggering a ...

Creating a connection to an external website through a JavaScript function within an Angular application

I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites. <a href="#" onclick="getExternalUrl('about.html');">Click here </a> <scr ...

Error Encountered: AngularJS Form Email - SyntaxError: An unexpected token '<' was found in the code

My attempt to send an email from my AngularJS website involves the following setup: Contact.index.html: <form name="userForm" class="well form-search"> <input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" ...

Struggling with a CSS problem that jQuery can't seem

I recently experimented with Infogrid on my website. After adding a header and footer, I noticed that the text in the last block of iron man was being cut off. Even though I removed overflow:hidden; from the body and html, the issue persisted with the te ...

The html function does not contain the value of the textarea

While attempting to retrieve the HTML content of a div using the code below, I noticed that it does not include the text entered in the textarea or input field. var mywindow = $(printDiv).html(); The variable mywindow will contain all the HTML except fo ...

Tracking progress in a Rails job using Coffeescript

Recently, I came across a helpful gem called this gem, which allows for the seamless integration of bootstrap progress bars and the delayed job gem. The example provided by the creator uses .haml files, but since my project utilizes erb and coffeescript, I ...

Unusual characters found in the fields of a Postgresql database table

In six out of over 30 fields in one of my postgresql tables, an unusual character has been found at the end of user-input text. This data is entered into the table through a PHP web form that has been in use for years. It's puzzling to see this charac ...

A step-by-step guide to displaying a label component upon clicking an AjaxLink

How can I display data from a JSON file when an AjaxLink is clicked? The code I have implemented is not working, so I would appreciate any corrections or suggestions. Additionally, I am wondering if it's possible to add a label inside AjaxLink. Thank ...

Attempting to update an AJAX field with the returned value, but it only updates after clicking away from it

Image of form utilizing AJAX & JS The current setup involves a maintainer that uses AJAX to update the "Calc" field in response to a number entered in the "Order No" field. The issue is that the "Calc" field does not update immediately after typing in the ...

Achieving the grid-column property as you navigate deeper into the tree

Currently, I am in the process of integrating a CSS design that utilizes grid and grid-column into my Angular application. The design itself is quite effective, structured similar to this: .grid { display: grid; grid-template-columns: repeat(3, 1 ...

Hide elements forever once the form is submitted

I'm seeking help to figure out how to make certain elements disappear after a form submission on my website's dashboard page. Specifically, I need to hide three elements once the user has submitted a form. Elements that need to be hidden: .vc_t ...

Retrieve data from a function in PHP while being outside of it

Embarking on this new journey of creating a plugin in wordpress, I find myself faced with the task of integrating jQuery code into my footer. The function at the beginning of my document serves this purpose, and here is a simplified version: function slug ...

The event.currentTarget's attempt to toggle the class of the child element is not functioning as

I am having trouble toggling a class of a child element of the target element. I can't seem to get it to work and I'm unsure of what steps to take next. HTML: <div class="post-footer-icons-container-el" data-btntype="comment&qu ...

Are toggle functionalities triggered when an element is clicked?

How come the span triggers functions a and b when first clicked, is there a way to set it up so that it calls function a on the first click and then function b on the second click? function a(id) { $.post("url.php", {'id':id}, function() { ...

Encountered an issue while attempting to start an SSR server with inertiajs

I followed all the necessary steps to set up an ssr application, but unfortunately, I am encountering some difficulties. config/inertia export const inertia: InertiaConfig = { view: 'app', ssr: { enabled: true, autoreload: process.en ...

Retrieving the text of a selected option by its value

I need to create a menu that returns text based on a given value. For example, if the value is 0, I want it to return “zero”, and if it's 1, then “one”, and so on. I don't need to know which option is selected or auto-select anything, I j ...

Having difficulty accessing and updating data in a database while using Discord.js

My goal is to enable staff to respond to the last direct message (DM) by using ~reply <message> instead of ~dm <userID> <message>. However, before I can do that, I need to store the user's ID in a database to identify the last person ...

Having trouble displaying HTML UL content conditionally in Reactjs?

My goal is to display a list of items, limited to a maximum of 5 items, with a "more" button that appears conditionally based on the number of items in the list. However, I am encountering an issue where passing in 5 li items causes them to be rendered as ...

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

Tips for connecting a webpage from a specific date

Is it possible to create a link using a date picker for a specific date, such as today's date being 25/2/2015? If something is updated on a page and someone clicks on that date (e.g. 25/2/2015) in the future, how would they be able to view that page? ...