Q:

Why does only one JavaScript function execute onClick?

I'm sort of new to JavaScript, that being said I've encountered a weird error in my code. I have three images in my HTML that when clicked should open in a modal. For some reason the modal will get stuck on the last of the new images. For example if I click on the first, then the third then the second, no matter what image I click on the second displays. I tried debugging by replacing the the a H1 tag with the name of the image, which threw another curve because now it takes two clicks to execute the modal. I am not sure what I doing and any help is appreciated. 
JS-
<script>
function mode(param)
{

    smode = param;
    document.getElementById("h1thing").innerHTML = smode;
    document.getElementById("myImage").src = smode;
    run();

}
function run(){
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById(smode);

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

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";

}

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

}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        smode = "";
    }
}
}
</script>

HTML-
<body>

<h2 id="h1thing">Modal Example</h2>

<!-- Trigger/Open The Modal -->
<center>
<div class="floated_img">
    <input id="ScreenShot.png" type="image" src="ScreenShot.png" width="400" height="300" alt="ScreenShot" onclick="myFunction();mode('ScreenShot.png');">
    </input>
</div>
<div class="floated_img">
    <input id="ScreenShot2.png" type="image" src="ScreenShot2.png" width="400" height="300" alt="ScreenShot2" onclick="myFunction();mode('ScreenShot2.png');">
    </input>
</div>
<div class="floated_img">
    <input id="kimlexi.jpg" type="image" src="kimlexi.jpg" width="400" height="300" alt="Kimlexi" onclick="myFunction();mode('kimlexi.jpg');">
    </input>
</div>
</center>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">

            <img src="x.png" width="40" height="40" alt="X">
    </span>
    <center>
        <img id="myImage" src="" width="600" height="500" alt="Kimlexi">
    </center>
  </div>

</div>
</body>

CSS-
<style>
button {
    background:transparent;
      border:none;
      outline:none;
      display:block;
      height:200px;
      width:200px;
      cursor:pointer;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.floated_img
{
    float: left;
}
</style>

A:

The problem
There are two problems here.

The first button click does not open the modal. The first time you click the image (let's use the first image as an example), the mode('ScreenShot.png') is executed, which 

sets smode to 'ScreenShot.png'
shows smode (='ScreenShot.png') in the <h1>
sets smode (='ScreenShot.png') as the <img>'s src
calls run(), which changes the onclick handler for the button but never actually opens the modal! 

The second click on the same button might show the wrong image. This happens because the button's onclick handler was overwritten in step 1.4 above (it is overwritten, not added), and the new event handler (btn.onclick = function() { modal.style.display = "block"; }) only makes the modal visible but does not change the image source.

Suggested solution
It will be easier if you only set the onclick handler once. Here is one solution.
JS-
function openModal(imgSrc)
{
    document.getElementById("myImage").src = imgSrc;
    document.getElementById("myModal").style.display = "block";
}

function closeModal() {
    document.getElementById('myModal').style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == document.getElementById('myModal')) {
        closeModal();
    }
}

HTML-
<input type="image" src="….png" width="400" height="300" 
        alt="ScreenShot" onclick="openModal('….png');">
…
<span class="close" onclick="closeModal()">

