Is there a way to adjust the image dimensions when clicked and then revert it to its original size using JavaScript?

Is there a way to make an image in an HTML file change size by 50% and then toggle back to its normal size on a second click using JavaScript? I've attempted to do it similar to the onmouseover function, but it doesn't seem to be working. Any suggestions or ideas on how to accomplish this?

Here is the HTML code:

   <article id="featuredartists">
        <h2>Featured Artists</h2>
        <div class="artistlist group">
            <ul class="group">
                <li><img src="images/artists/Barot_Bellingham_tn.jpg" alt="Photo of Barot Bellingham" onclick="func3()"></li>
            </ul>
        </div>
    </article>

And here is the external JavaScript function:

    function func3() {
       x = document.getElementsByTagName("img")[11];
       x.height = 50%;
       x.width = 50%;
    }

Answer №1

Here is an easy example using transforms. Simply toggle a class when clicked.

document.querySelector("img").addEventListener("click", function(){
  this.classList.toggle("half");
});
img
{
  transition-duration: 0.4s;
}

img.half
{
  transform: scale(0.5);
}
<img src="https://via.placeholder.com/100x100"/>

If you want to change the size of the element and its layout, adjust the width/height in the .half class.

document.querySelector("img").addEventListener("click", function(){
  this.classList.toggle("half");
});
img
{
  transition-duration: 0.4s;
  width: 100px;
  height: 100px;
}

img.half
{
  width: 50px;
  height: 50px;
}
<img src="https://via.placeholder.com/100x100"/>

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

What is the method to retrieve the image's value after dropping it onto the droppable area?

I have implemented a drag and drop feature using jQuery, and I am trying to extract the value of an image and insert it into a database. Additionally, I want to update and remove the image value when it is removed from the droppable area. How can I achie ...

Replace specific text with a span element around it?

I am working with the following HTML code: <p class="get">This is some content.</p>. My goal is to modify it so that it looks like this: <p class="get">This is <span>some</span> content.</p>. To achieve this, I have ...

Tips on how to render a component only after receiving an AJAX response

I'm encountering an issue with one of my React components. It seems like AJAX is not fetching all the content from the external server before React renders the ChildComp component. https://i.stack.imgur.com/o0ZtH.png Above, you can view the tree of ...

The Bootstrap slide function encounters issues within the AJAX success callback

Here's the code snippet with a 'slide' event inside an AJAX success call. success: function(data) { $('#my_container').html(data); // Successfully loading #mycarousel into #my_container $('#mycarousel').bind( ...

Ensuring Proper Alignment of Headers in CSS

I'm struggling to align my header correctly. Despite getting close in Internet Explorer, it looks terrible in Firefox with the code below. I've scoured forums for solutions but the more I try to fix it, the worse it looks. All I want is for heade ...

Guide to integrating Firebase Cloud Messaging (FCM) with Nuxt.js

Looking to integrate Google's Firebase Cloud Messaging (FCM) into my Nuxt.js application has led me to successfully install firebase, create a firebase.js plugin in the ./plugins folder, import and initialize firebase along with the messaging service. ...

Leveraging custom properties in HTML elements with JavaScript

I am in the process of creating a straightforward battleships game that utilizes a 10x10 table as the playing grid. My goal is to make it easy to adjust the boat length and number of boats, which is why I'm attempting to store data within the HTML obj ...

The maximum property in a Mongoose schema does not have any impact or

const mongoose = require("mongoose"); const PostSchema = new mongoose.Schema( { user_id: { type: String, required: true, }, content: { type: String, max: 150, required: true, }, }, { timest ...

Executing Angular CLI tasks using a script file rather than directly from the CLI? Embracing the power of Localization and Internationalization

Our Angular 2 app is gearing up for internationalization/localization, and I am looking to create scripts that can handle tasks such as generating translation source files or building/serving the application with translations in a specific language. Inste ...

In this JavaScript tool for counting characters, every carriage return is counted as two characters

Hello there! I have created a character counter in JavaScript that looks like this: <textarea class="SmsText" id="txttemplate" maxlength="160" /> <span id="charsCount">160</span></strong><span>character(s) left</span> ...

The rule 'react-hooks/exhaustive-deps' does not have a defined definition

I received an eslint error message after inserting // eslint-disable-next-line react-hooks/exhaustive-deps into my code. 8:14 error Rule 'react-hooks/exhaustive-deps' definition not found I tried to resolve this issue by referring to this p ...

Enable automatic scrolling when a button on the previous page has been clicked

Imagine there are two buttons (Button 1 and Button 2) on a webpage (Page A). Clicking on either button will take you to the same external page (Page B). How can we ensure that Button 1 takes you to the top of Page B, while Button 2 automatically scrolls do ...

Customize the size of table cells in Bootstrap to fit the content

I am working on a table with Bootstrap where each cell contains a button element. I am trying to adjust the width of each cell to accommodate the button and margin, but using <td class="col-md-1"> doesn't seem to make any difference. Is there a ...

The input type "number" does not seem to be compatible with the currency pipe feature

The currency pipe seems to not be working when using the input type number. The web page is not displaying any value. I have searched various blogs and it appears that the currency pipe only works with input type text, but my requirement necessitates the ...

What is the best way to fill in predetermined HTML with information using jQuery?

Currently, I am working with several ajax forms that allow me to add rows of data dynamically using ajax. While the form submission is functioning correctly, I am having trouble figuring out the best way to append the newly inserted data into the database. ...

Error: Module specifier "react-router-dom" could not be resolved. Relative references should start with either "/", "./", or "../"

I encountered an error message after executing the command npm run preview: Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../". ...

Is using JQuery recommended for implementing onclick and onchange events?

Hello there, I'm completely new to the world of jQuery and currently facing a bit of confusion. Here's my dilemma: should I be utilizing jQuery with the onclick event or the onchange event for an element using something like this: $(selector).som ...

"Controlling Selected Options in Bootstrap Dual Listbox: A Guide to Limiting Choices

I am utilizing the Bootstrap Dual Listbox plugin to assist users in selecting specific options. I have successfully integrated this plugin into my project. However, I encountered an issue when attempting to impose a limit on the number of options a user ...

What is the reason for the JavaScript TypeError (undefined) being triggered when this object is used within a function?

I have defined a new object like this: function node(){ this.tag = null; this.Tdata = []; this.Tchilds = []; } Now, I am trying to use this object in a function: function Validate(root /*Ass ...

I am looking to change the state of only the element that is being moused over in a React Hooks useState function, rather than changing the

Currently, I have a component from line 61-67 that controls the state of an editIcon. The issue is that it changes the state values for all items in the column, rather than just the specific item or row it should apply to. When hovering over a span element ...