Open different modal inside a main modal plain javascript

So I have three image elements that open a modal when clicking on them. The problem comes when I want to open a specific div that is inside the main modal.

I want to open one for the first image click, other for the second and same for the third one.

Actually with the following code I can see in the console that each article display is correctly changed to block with each image click but the window does not show on the screen.

I checked all the styles and everything looks fine, z-index, positions and display.

Am I missing something? If anybody has a better solution or idea is welcome.


    <img src="#" alt="#" class="image image--1" onclick="openModal()">
    <img src="#" alt="#" class="image image--2" onclick="openModal()">
    <img src="#" alt="#" class="image image--3" onclick="openModal()">

<div class="modal">          
    <article class="modal--1>
    <article class="modal--2>
    <article class="modal--3>


const images = document.querySelectorAll('image');
const modal = document.querySelector('.modal');

const openModal = function() { = 'block';
    console.log('Modal window opened');

for(var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', openModal);

function openImage1() {
    modal = document.querySelector('image--1').style.display = 'block';

function openImage2() {
    modal = document.querySelector('image--2').style.display = 'block';

function openImage3() {
    modal = document.querySelector('image--3').style.display = 'block';

const htmlImage = document.querySelector('.tech__image--html');
const cssImage = document.querySelector('.tech__image--css');
const jsImage = document.querySelector('.tech__image--javascript');

htmlImage.addEventListener('click', openHTML);
cssImage.addEventListener('click', openCSS);
jsImage.addEventListener('click', openJS);

Read more here:

Content Attribution

This content was originally published by Uzumaki at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: