Adrian Gheorghe Adrian Gheorghe - 2 months ago 35
Javascript Question

second modal button doesn't work

My second, third and so on buttons which open modal, doesn't work and I can't figure out the problem.

I think is a logic problem in my javascript code for sure, but I can't find a way to solve it ... maybe you can help me.

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var buton = document.getElementById('continut');

buton.onclick = function() {
modal.style.display = "block";
modalImg.src = img.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//When the user clicks on <span> (X), close the modal
span.onclick = function() {
modal.style.display = "none";
}


You have a demonstration on jsfiddle

Thanks in advance !

https://jsfiddle.net/qschptk9/1/

I've got 2 negative votes, and NO ONE Helped me.

Ok i've Changed the ID's, but still doesn't work, because getElementsByClassName return an array of elements ...

Answer

id should be unique so you should't use it for 2 elements you use the same id 2 times for many elemets (button, modal, img, modalimg) you can change the id's for all those elements (hard coded option), or you can add a class for both and add click event for both but you will need to differentiate each modal and each img (you can do this by passing ids for these elements in a function)

Edit

this is an optimized solution that i would use for you want to do

I added only one modal and used onclick event for each button to pass the header text and the img id to a function that show the appropriate modal here is the HTML

<div class="portfolio_content">
    <div class="row" id="portfolio">
        <div class="col-xs-12 col-sm-4 websites responsive webDesign">
            <div class="portfolio_single_content">
                <img id="myImg1" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
                <div>
                    <!--Continut because from here we access the content of this preview photo-->
                    <div class="continut">
                        <p>Portfolio Website</p>
                        <button class="seeBtn" onclick="showModal('Portfolio Website','myImg1')">
                            button
                        </button>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-4 appsDevelopment">
            <div class="portfolio_single_content">
                <img id="myImg2" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
                <div>
                    <!--Continut because from here we access the content of this preview photo-->
                    <div class="continut">
                        <p>Pomodoro Clock</p>
                        <button class="seeBtn" onclick="showModal('Pomodoro Clock','myImg2')">
                            button
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!--The modal-->
<div class="modal" id="myModal">
    <!-- Modal content -->
    <div class="modal-content">
        <!--Modal header-->
        <div class="modal-header">
            <span class="close" id="close">CLOSE X<i class="fa fa-times" aria-hidden="true"></i></span>
            <h2 id="modal_h1"></h2>
        </div>
        <div class="modal-body">
            <img class="modal-image" id="img01">
        </div>
        <div class="modal-footer">
            <h3>External <a href="" target="_blank">link</a></h3>
        </div>

    </div>
</div>

and here is the js code

var modal = document.getElementById('myModal');
var modalImg = document.getElementById('img01');
var modalHeaderTxt = document.getElementById('modal_h1');

function showModal(header_txt,img_id){
    // Get the image and insert it inside the modal
    var img = document.getElementById(img_id);
    modalImg.src = img.src;
    modalHeaderTxt.innerHTML = header_txt;
    modal.style.display = "block";

}
// Get the <span> element that closes the modal
var span = document.getElementById("close");

//When the user clicks on <span> (X), close the modal
span.onclick = function() {
  modal.style.display = "none";
} 

Demo

and here is the hard coded option (i don't recommend it)

var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var img2 = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var modalImg2 = document.getElementById('img02');
var buton = document.getElementById('continut');
var buton2 = document.getElementById('continut2');

buton.onclick = function() {
  modal.style.display = "block";
  modalImg.src = img.src;
}
buton2.onclick = function() {
  modal2.style.display = "block";
  modalImg2.src = img2.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];

//When the user clicks on <span> (X), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
span2.onclick = function() {
  modal2.style.display = "none";
}

Demo