Value of an object passed as a parameter in a function

Question

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>

javascript jquery html css

Answer 1

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>

Answer 2

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>

Value of an object passed as a parameter in a function

Answer №1

Similar questions

Combining an AJAX POST within a JSON GET request

React-router can manage non-matching paths by utilizing a basic JavaScript router configuration

Expanding columns to reach the full height of the page

Easily send maps and directions straight to your mobile device with mapQuest

Using callback functions with Ajax

Here's a way to run JavaScript code from a <script> tag included in an AJAX response

Exploring data elements in a Javascript array

False return - Inoperative link - Scroll option

What is the benefit of using $q.all() with a single promise in AngularJS?

Avoid constantly destroying the Bootstrap Popover

What is the protocol for displaying linear gradients that overlap?

Babeljs encountered an error: TypeError - The super expression should be a function or null, not undefined

Retrieve data using $http.get when an accordion group is expanded in AngularJS

Final iteration within the recursive function

Ways to examine a JavaScript Bound Function

Exploring Linked Data in JSON API Response with Rails API, Active Model Serializer, and Vue.js Single Page Application

Displaying one out of two elements when the button is clicked

Passing data in object as key value after serializing using jQuery AJAX sortable is a common and

Eliminate the use of quotation marks in the AJAX response

Which Angular2 npm packages should I be installing?