Upon selecting the display image option

Here is a jsfiddle file provided for your reference.

I am attempting to create a functionality where upon clicking buttons (1,2,3,4), the corresponding image shows up and overlaps with any previously displayed images. I have tried using the following code:

$('#showButton').click(function() {
    $('#img3').show();
    return false;
});

However, this approach does not seem to be working as intended.

Is there a way to specify that when clicking a particular button, show #img1 and subsequently, when another button is clicked, have #img2 overlap that image?

Thank you in advance for your assistance!

HTML

<h1>Question goes here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
<br>
<br>
<br>
<h1>Another question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
<br>
<br>
<br>
<!-- Images Section -->
<img src="line-01.png" id='img1'>
<img src="line-02.png" id='img2'>
<img src="line-03.png" id='img3'>
<img src="line-04.png" id='img4'>
<img src="line-05.png" id='img5'>
<img src="line-06.png" id='img6'>
<img src="line-07.png" id='img7'>
<img src="line-08.png" id='img8'>
<img src="line-09.png" id='img9'>

CSS

img {/* display:none;
position:absolute;
width:200px;*/
}

Answer №1

If you want to display different pictures when clicking on buttons, you can assign a number to each button and then use that number in the onclick event to show the corresponding image:

<button onclick="showPicture(1)">1</button>
<button onclick="showPicture(2)">2</button>
<button onclick="showPicture(3)">3</button>

Here's a simple function to achieve this:

function showPicture(num) {
  $("#img"+num).show();
}

This approach may have some limitations, but it's a good starting point for beginners in JavaScript. You may encounter bugs if you click on buttons multiple times, but with some tweaking, you should be able to resolve them!

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 best way to incorporate a close button into an HTML video popup?

I have a cool feature on my website where an image can be clicked to reveal a popup video that starts playing. However, I would like to know how I can include a close button on the video itself so users can easily return to the website without having to hi ...

I am experiencing issues with my AJAX file and it seems to be

After creating a basic AJAX application to retrieve data from a PHP file using an ajax.js file, everything was uploaded to the server. However, upon accessing localhost/mypage, the expected results did not occur due to unforeseen issues. Below is the HTML ...

Steps to initiate my selenium-standalone server: Execute the command "selenium-standalone start"

I'm currently facing a challenge while trying to execute a test script in WebDriverIO. After cloning the code from wdio-cucumber-framework, I am unable to get selenium-standalone to start properly. The error message indicates an issue with geckodriv ...

Angular: Modify value when checkbox is ticked

Controller: promiseObj.physical = $http.get('search?sumBoth=1&customer=' + customer).success(function(data) { $scope.servers = data; // retrieve data from JSON }); View: <tr ng-repeat="data in servers | filter: { _id: { idc: item._ ...

Displaying a second dropdown menu when the first option is chosen

I need help displaying a second select menu once an option in the first one has been selected. How can I achieve this using jQuery? Here is the code snippet: CSS: #2nd{visibility: hidden;} #a{visibility: hidden;} HTML: Please select: <select id ...

Utilizing modal dialogs in HTML and navigating back to the previous page

I'm currently learning about HTML, CSS, JavaScript, and SQL. Here is some context: Imagine a scenario where I am developing a website to manage information on dogs, their owners, and the relationships between them. All this data is stored in an SQL ...

Asyncronous calls in Angular involve executing tasks without

The issue seems to be related to the timing of updates for the controlSelected and isAssessmentDataLoading variables. The updateQuestions() method is invoked within the ngOnInit() method, which is triggered when the component is initialized. However, the ...

Tips for enabling auto-scroll feature in MuiList

Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sen ...

Ways to identify if one object is positioned above another

So, here's the scenario: I'm trying to figure out how to detect when one element is positioned on top of another. Specifically, I'm dealing with SVG elements: <circle r="210.56" fill="#1ABCDB" id="01" priority="4" cx="658" cy="386">& ...

Tips to center a circular progress bar in Material UI

Does anyone know how to properly center-align a circular progress bar in a login form using material UI? I'm having trouble with it not being positioned correctly: screenshot {isLoading && <CircularProgress />} {user?.ema ...

various issues with fonts and Uncaught Eval error

I've been encountering multiple font/style errors and an uncaught eval. I have attached a picture for reference. My Angular application is not functioning properly, and I suspect these errors may be the reason. However, I am unsure of their significan ...

Obtaining JSON values by key name using JQuery

I am trying to extract JSON data using an HTML attribute How can I retrieve JSON values based on the translate attribute and "ed" key? JSON FILE { "open" : [ { "en": "Open", "ed": "Opened ...

Setting the locale in an extended datapipe in Angular 4: A step-by-step guide

I have created a custom pipe by extending the DataPipe Angular class. import { Pipe, PipeTransform } from '@angular/core'; import { DatePipe } from '@angular/common'; @Pipe({ name: 'dateTimeFormater' }) export class DateTi ...

Incorporating a new function into a TypeScript (JavaScript) class method

Is it possible to add a method to a method within a class? class MyClass { public foo(text: string): string { return text + ' FOO!' } // Looking for a way to dynamically add the method `bar` to `foo`. } const obj = new MyCl ...

Leveraging Angular2's observable stream in combination with *ngFor

Below is the code snippet I am working with: objs = [] getObjs() { let counter = 0 this.myService.getObjs() .map((obj) => { counter = counter > 5 ? 0 : counter; obj.col = counter; counter++; return view ...

The integration of socket.io with static file routing in node.js is encountering issues

I am currently developing a chat application and I have encountered an issue. When the static file routing is functioning correctly, the socket.io for the chat feature throws a "not found" error in the console. http://localhost/socket.io/?EIO=3&tran ...

Update the contents of a neighbor div within the same parent element using jQuery

Attempting to set the range slider value within the slider parent sibling var updateRangeSlider = function() { var slider = $('.range-slider'), range = $('.range- value = $('.range-slider__value'); sli ...

Distance Services are experiencing difficulty with custom markers when utilizing the Google Maps API

I am currently utilizing the HTML5 Geolocation API to map out the route from the client's current position to the final destination. I have incorporated the Distance Services API for displaying the route, but I am encountering an issue with customizin ...

Vue2 is not compatible with the vue-email-editor component

I checked out the official website to install the vue-email-editor. Here is the link for the unlayer vue-email-editor component However, I encountered the following error: vue.runtime.esm.js?c320:4573 [Vue warn]: Error in render: "TypeError: (0 , ...

Nodejs and express authentication feature enables users to securely access their accounts by verifying their identity before they

I am currently working on a straightforward registration page that needs to save user input (name, email, password) into a database. My tools for this task are express and node. What I am experimenting with is consolidating all the database operations (suc ...