What is the reason behind the limitation of resizing only the most recent page element I added?

On my webpage, I have implemented a feature where I can click on an image to enlarge it. Clicking on the image again shrinks it back to its original size. However, I am encountering an issue where only the latest image added to the screen is resizable, even though none of the variables are being modified. This functionality is part of a game I am currently developing. I have created a sample page with minimal code to test this feature, which can be accessed here: My goal is to enable the ability to click on any image at any time and have it grow and shrink accordingly.

javascripthtmlcssdhtml

Answer №1

After reviewing your webpage code, I noticed that you are using innerHTML += ... to insert new images. This method is not ideal as it forces the browser to recreate all inner elements each time, which may lead to unexpected issues with event handlers.

It is recommended to utilize DOM methods for creating and adding elements. For instance:

var newImg = document.createElement('img');
newImg.id = id;
newImg.onclick = handleClick; // No need for parameters, as this.id is accessible within the function
...
board.appendChild(newImg);

Here are a couple of additional points to consider:

  1. Using xPix * yPix as part of the ID may not guarantee uniqueness. For instance, x = 500, y = 10 and x = 10, y = 500 will produce the same ID. Why not simply use xPix + ',' + yPix as a standalone string?

  2. The multiple lines where you initialize Pieces[id] can be simplified using object notation: 

    Pieces[id] = { Piece: ..., xPix: ..., yPix: ... }
    .

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

Eliminate image line breaks associated with hyperlinks without the need for table cells

My webpage includes a <div> with various images: <div> <img src="pic1.jpg" /> <img src="pic2.jpg" /> <img src="pic3.jpg" /> </div> However, whenever I add a hyperlink to any of the images, it causes an unwante ...

htmlcss

Guide to simulating Twilio with Jest and TypeScript to perform unit testing

Please assist me in mocking a Twilio service that sends messages using Jest to mock the service. Below is the code I am working with: import { SQSEvent } from "aws-lambda"; import { GetSecretValueResponse } from "aws-sdk/clients/secretsmanag ...

javascripttypescriptunit-testingjestjstwilio

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace

The while-loop using Regex adds only a single value to my array

Within my variable htmlContent, there lies a string filled with properly formatted HTML code, which includes various img tags. The goal is to extract each value from the src attribute of these images and place them all in an array named srcList. The issu ...

javascriptregextypescript

Having difficulty aligning the button in the center

I encountered an issue trying to center a button, I attempted to use text-align: center, but it didn't have the desired effect. .regis-btn { border-radius: 0px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o ...

htmlcss

"Transmit the document by utilizing the file ID in the form of

When sending a file from my server, I can easily define the path and it goes through successfully. However, with the node-telegram-bot-api, there is an option to send a document that is already hosted on telegram servers by providing the file_id in the doc ...

javascriptnode.jstelegramtelegram-bot

What could be causing the lack of functionality in the responsive feature?

What could be the reason for the disappearing responsive effect of the navbar not working in this link? <nav> <li>Hello</li> </nav> <style>@media screen and (max-width:400px) { .nav { display: none; } </styl ...

htmlcssmedia-queries

Adjust the height of the drawer in material-ui

In my current project using react and material-ui, I am facing a simple issue that has me stumped. I am trying to create a drawer with a specific height so that it does not overlap the app bar when opened. Unfortunately, there is no built-in parameter in ...

cssreactjsmaterial-ui

The NgFor is unable to iterate over an array because it is being treated as an

When attempting to call a new endpoint for displaying data, I noticed that the previous set of data is wrapped with an extra pair of brackets '[]', which seems to be causing a problem. The new endpoint does not format the data in this way when I ...

javascripthtmlangular

Arrange blocks within bootstrap columns using grid css

I have a layout with two columns, each containing two blocks Currently, the mobile order is: 1 2 3 4 But I want it to be: 3 1 2 4 I attempted to use CSS grid but I am unsure how to move block 3 out of column 2. Here's the code snippet: body { ...

cssbootstrap-4css-grid

Styling a component next to another using CSS

Struggling with a simple question here. I'm experimenting with HTML and CSS, trying to create a page with a central content box flanked by two arrow images on each side. While the concept isn't too difficult, I'm running into issues with usi ...

htmlcssposition

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml

Retrieving the source code of a specific http URL using JavaScript

Is it feasible to obtain the source code of a webpage using JavaScript on the client side? Perhaps with AJAX? However, can I ensure that the server from which I am downloading the URL sees the client's IP address? Using AJAX could potentially reveal ...

javascriptajaxurl

identify external components based on their internal identifiers

Can we target an external element based on its descendant elements? This question arises from the need to apply one stylesheet to two different dynamic pages within the same wrapper. Page 1 <div id="api"> <div class="a"></div> </div ...

csscss-selectors

Strip the pound symbol from the end of a URL during an AJAX request

When I click on the News tab in my Rails application (version 2.3.4 and Ruby 1.8.7), an Ajax call is triggered to load data. <a href="News" onclick="load_feed();"><u>Show More...</u></a> <script> function load_feed() { $.a ...

javascripthtmlruby-on-railsajax

Lifting Formik's "dirty" value/state to the parent component: A step-by-step guide

Parent Component const Mother = () => { const [dusty, setDusty] = useState(false) return ( <ChildComponent setDusty={setDusty} /> ) } Child.js ... <Formik initialValues={initialValues} onSubmit={onSubmitHandler} validationSchema={sch ...

javascriptreactjsformik

Can a single value be stored in a table using a radio button?

I have created an HTML table that is dynamically generated from a database. I am using a for loop to populate the table. However, I am facing an issue where each radio button in the table holds only one value. What I actually want is for each row to have ...

javascripthtml

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is

I'm working on an application that heavily relies on AJAX requests, requiring the rapid or concurrent sending of multiple calls. The code snippet provided serves as a basic wrapper for sending AJAX POST requests within the app. However, I've enco ...

javascriptajaxasynchronousxmlhttprequest

Ever since updating my Node JS, the functionality of the MaterializeCSS carousel methods has ceased to work

Recently, I encountered some issues with my React project that features a materialize-css carousel. The problem arose after updating my nodeJS version from 14.8.1 to 16.13.0. Specifically, these errors kept popping up: TypeError: Cannot read properties o ...

javascriptnode.jsreactjsmaterialize

What is the procedure for updating or adding data to a JSON file with angularJS?

After successfully creating a local JSON file and retrieving data from it using app.controller('appCtrl', function($scope, $http){ $http.get('employees.json').success(function(data){ $scope.employees=angular.fromJson(data.employee ...

javascriptjsonangularjs