Guide to effectively utilizing addEventListener for images

Is it possible to measure the width of an image loaded by user click in Javascript? I need the width in order to adjust the position of a button next to the image.

Here is the code I am using:

document.getElementById('preIMG').addEventListener("load", adjustButtonPosition); 


function adjustButtonPosition(){
   var imgWidth = document.getElementById('preIMG').clientWidth;
   var imgWidPos = document.getElementById('picture_preview').clientWidth - imgWidth + 15;
   document.getElementById('gear_butto').style.right = (imgWidPos*0.5) + "px";
}  

Additional note: The user can view multiple images and it seems that the addEventListener only works the first time the side is loaded.

Answer №1

Avoid invoking functions within click events; instead, simply reference the function and JavaScript will execute it when the click event occurs.

document.getElementById('preIMG').addEventListener("load", handleButton2IMG); 

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

How to prevent a nested element from inheriting the parent's styling

<ul id="login"> <li><a href="#">User></a></li> <li><a href="#">Logout></a></li> </ul> My menu and sub-menu are functioning correctly, however, the last item that came from a Partial ...

Learn how to smoothly transition between AJAX pages by toggling a class on click for a seamless animation

I am currently working on a practice project that involves loading each page via AJAX and displaying a fadeIn, fadeOut transition using CSS animation opacity. However, I am facing an issue where the addClass and removeClass functions are not being execute ...

An element in AngularJS is replicated for a brief moment of 1 second

I am having trouble with my login form that displays an error message in a box. <div class="ui negative message" ng-if="vm.message != ''"> <span ng-bind="vm.message"></span> </div> The error message is being set in t ...

The error message "Failed to load the default credentials in Firebase" occurs sporadically. Approximately 50% of the time, the app functions properly, while the other 50% of the time, this specific

Occasionally in my firebase functions log, I encounter an error message stating: "Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information." This error appears randomly withi ...

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

Target the CSS element with a specific class only if it is not the first child within its parent

In my coding project, I have created a div.container which contains multiple p elements. Some of these p elements have the class p.special. My goal is to select the p.special elements that are not positioned at the very top of the parent container (i.e., n ...

Change from full manual control to automatic mode

Here is the link to my code: http://jsfiddle.net/yHPTv/2491/ I am experiencing an issue with the transition effect. The hidden element is supposed to slide into view from the right edge of the .block element, but instead, it just appears suddenly. .blo ...

Strange behavior observed with Nuxt Js asyncData method returning values

Currently, I am engaged in a project using nuxt js/vue js. The project requires me to interact with multiple REST APIs. To accomplish this task, I am utilizing the asyncData() function provided by nuxt js to make the API calls within the page component. i ...

Different results are being obtained when destructuring props in a component

Just diving into the world of React and trying to grasp destructuring. I've been doing some reading on it, but I'm currently stuck. When I try to destructure like this function MList({action}) { // const data = [action];}, I only get 'camera ...

Error in Next.js PDFtron Webviewer: ReferenceError - 'window' is not defined

Currently, I'm faced with a challenge in setting up a PDF viewer on my nextjs static page. Having recently ventured into Next.js, I'm seeking assistance from you guys to resolve this issue or suggest an alternative approach. While trying to imple ...

Unexpected symbol in JSON parsing with JavaScript

let information; $.ajax({ url: link, type: 'POST', dataType: "json", success: function (data, textStatus) { information = data; alert(data.name); } }); I am attempting to retrieve JSON-encoded data from a spe ...

What is the process for importing a JSON5 file in Typescript, just like you would with a regular JSON file?

I am looking to import a JSON5 file into a JavaScript object similar to how one can import a JSON file using [import config from '../config.json']. When hovering over, this message is displayed but it's clearly visible. Cannot find module & ...

Different options for determining network connectivity on a website

Seeking Network and Location Information on ASP.Net Core MVC Web Application After some investigation, I came across the Navigator API online. For acquiring location data, it functions flawlessly. navigator.geolocation.getCurrentPosition(function (posi ...

What could be causing my dropdown menu to not appear when clicked?

I am trying to implement the functionality shown in the image. When the Settings button is clicked, a window should open allowing the user to navigate to their desired option. However, I am facing an issue where nothing happens when the button is clicked. ...

Using Flexbox for laying out content in both columns and rows

Hey there, I'm looking for a little help. It's been quite some time since I last built a website from scratch and I want to keep things simple this time around. I've used breakpoints before, but I'm curious if Flexbox could be a better ...

Encountering an unexpected error with the InvalidCharacterError in IE11 when using VEE Validate in conjunction with Vue.js and babel-p

Encountering an issue in IE11 where I receive an InvalidCharacterError when attempting to validate a form using vee validate in vue.js. It seems like it might be related to a polyfill error, but I'm uncertain. I have tried debugging by removing certai ...

Utilizing Nested JSON for Stacked Highcharts Implementation

I've been researching extensively about nested json for Highcharts stacked percentage column, but I haven't been able to get the desired output. Below is the code that I have tried, but unfortunately it's not producing the expected result. ...

How can I toggle the visibility of form inputs while utilizing Vue Formulate Schemas?

I've been experimenting with Vue Formulate schemas to build a form. My goal is to have two radio buttons, A and B, where clicking A reveals an additional input field below. When B is clicked, the extra input field should be hidden. Using a schema is ...

Trimming Picture on User's Device

Currently, I am utilizing the jQuery ImgAreaSelect 0.9.10 plugin to crop images that are uploaded by users. The data input format being used is "multipart/form-data". Upon cropping an image with the plugin, it provides me with coordinates in pixels. Howev ...

Choosing the primary camera on a web application with multiple rear cameras using WebRTC

Having a bit of trouble developing a web app that can capture images from the browser's back camera. The challenge lies in identifying which camera is the main one in a multi-camera setup. The issue we're running into is that each manufacturer u ...