Using JavaScript to pass the entire object as an argument in the onclick method, instead of a simple

<div class="rating" onclick="swapImg('good')"><img id="good" class="unselected" src="img/unrated.gif"/></div>

I am facing a strange issue with my JavaScript function. It seems that the entire img object is being passed into swapImg instead of just the string 'good'. When I use console.log(param) to log the parameter being passed into swapImg, this is what I see:

<img id="good" class="unselected" src="img/unrated.gif">

Can anyone help me figure out why this is happening?

function swapImg(imgId) {
    console.log(imgId);
    var image = document.getElementById(imgId);
    console.log("success2");
}

Answer №1

I tried out your function and HTML, and it worked smoothly.

It's interesting how the this variable gets set to the div instead of the image. Could there be any other event handlers lurking somewhere on the page? Maybe there's an unexpected onclick event attached to the img tag itself?

I ran tests in Firefox 3.5. Since your syntax looks correct, there must be another factor causing the issue besides what you've shared.

If you'd like, you can take a look at my test here. In Firefox or Safari (in developer mode), try clicking the red div, and you'll see the following in the console:

bad
success2

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 reason why the JSX select element does not automatically select the option (implementing 'selected')? I'm unsure if I am overlooking something

In my HTML, I have a snippet of code that defines a custom <SelectField> component using a <select> tag like this: export default function SelectField(props) { /* PARAMETERS: - fieldname (String) - fieldID (String) - options (A ...

What is the best way to update auto margins after resizing an element with Javascript?

I'm having an issue with a DIV on my webpage that is centered using margin-left and margin-right set to auto. When I try to resize the DIV, it no longer stays centered on the screen. <div id="content" style="margin-left:auto;margin-right:auto;widt ...

Exploring the world of threejs through the eyes of the protagonist

I have been working on creating an animation example using a GLTF file of Dragonball, where the user should feel like they are riding in a car from a first-person perspective. However, I am struggling to achieve this effect. Any tips on how I can make it h ...

Retrieving user's listening statistics from Last.fm API with JSON formatting

My goal is to showcase the Last.fm user playcount on my website (refer to 'playcount' on ). I attempted the code below, but I'm unsure if I am heading in the right direction. $(document).ready(function() { $.getJSON("http://ws.audioscrobble ...

Is there a way to determine whether a mouse-down event took place on the scroll-bar or elsewhere within the element?

Looking for a solution with my HTML div acting as a canvas containing various objects. The issue lies in the fact that when attempting to draw a selection rectangle by dragging with the mouse, if scroll bars appear due to the large size of the canvas, scr ...

Ways to ensure the input placeholder remains visible as the user is typing

I'm facing a fresh and fascinating challenge. Rather than the typical behavior of the placeholder text vanishing as soon as the user begins typing, I'd like it to stay in place but move over to the right side of the input box. Can this be accomp ...

Create a stunning MUI App bar with a blurred effect below a fixed Navbar

Is there a method to apply a blur effect to the background of my material-ui AppBar component, creating a visually appealing overlay below the fixed navbar? I have experimented with using filter: blur(0) but it does not achieve the desired result. I am lo ...

Tips for prioritizing new data input at the top of the list

Hey there, I'm having trouble figuring out how to push new data to the top of a list using vue.js and laravel. I've been trying but haven't had any luck so far. If anyone could lend a hand, I would greatly appreciate it. Below is my Control ...

How can AngularJS be used to implement lazy loading for Google jsapi charts?

I have a single page application with different tabs. I want to include a Google chart only on one specific tab without directly loading the charts js file, jsapi, unless that tab is accessed. To achieve this, I need to dynamically add the JavaScript as s ...

Ways to obtain the information showcased in this demonstration

Consider the following HTML code <table> <tr> <td>1</td> <td>e</td> <td>a</td> </tr> <tr> <td>2</td> <td>e</td> <td>c</td> < ...

Difficulty encountered when trying to template routes with more than one slash in Angular-route

I'm encountering difficulties with my Express+Jade+AngularJS[v1.2.22] application when attempting to access routes such as "mydomain.com/something/somethingelse" or "mydomain.com/something/another/last", which include one or more path subdivisions. T ...

The server has denied access to the resource due to a HTTP 403 Forbidden error in the AJAX request

I have exhausted all resources online in an attempt to resolve an error I am encountering with my AJAX request. Even after trying XMLHttpRequest() request, the problem remains unsolved. Below is the code for my Ajax Request: $.ajax({ type: "POST", url: " ...

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

I am trying to send an image as base64 code to a Google sheet using fetch. However, I am encountering an error that says "data_sent is not defined" when I run my code. I need help identifying the problem and finding a solution to fix it. For reference, & ...

Utilize Jquery to send a preset value through an ajax request

I am working on a select box functionality where the selected option is sent via ajax to a server-side script. The current setup is functioning properly. Here is the code for the select box: <select id="main_select"> <option selecte ...

Extracting Client's True IP Address using PHP API

Utilizing the following api: I am able to retrieve country, city, and real IP address in localhost (127.0.0.1) successfully. However, when I implement this code on my website, it displays the server's address instead of the client's. How can I r ...

Having trouble with the $.each function?

Values from the database row units for values salam & salavat are as follows: [these values were inserted using json_encode()] salam: [{"name_units":"salam","price_units":"74,554","checkbox_units":["minibar","mobleman"]},{"name_units":"mokhles","pr ...

Set a unique color for the background of the button when it is clicked

I am looking to enhance my previous post by adding a background color to the button upon clicking. My attempt with btn[i].style.background = "#000000" did not work as expected. <script> const btns = document.getElementById("container"); const textBt ...

When activating another function, Javascript failed to trim and hide the div as intended

Before adding another function (*2), my function (*1) was working perfectly. However, after adding the second function, there seems to be a conflict and now it's not working as expected. :( <script type="text/javascript> $(function() { ...

Navigate to the recently added entry using Router.push in your NextJS/Supabase project, leading to no return value

In the process of developing an application that allows users to register shipments between different locations, I encountered a roadblock. Once a user creates a new shipment and saves it, they should be able to add goods to it. However, despite my efforts ...

Customizing Bootstrap styles when toggling

I have been working on incorporating a dark/light theme into my project. By creating a separate SCSS file that is imported after the main Bootstrap file, I was able to override certain core Bootstrap styles to achieve a dark/light mode. Now, I am facing th ...