为什么只有一个JavaScript函数执行onClick？

Question

I'm sort of new to JavaScript, that being said I've encountered a weird error in my code. 我对JavaScript有点陌生，也就是说我在代码中遇到了一个奇怪的错误。 I have three images in my HTML that when clicked should open in a modal. 我的HTML中有3张图片，当单击它们时应以模式打开。 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. 我尝试通过将H1标签替换为图像名称来进行调试，这又引发了另一条曲线，因为现在需要两次单击才能执行模态。 I am not sure what I doing and any help is appreciated. 我不确定自己在做什么，我们将不胜感激。

JS- 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- 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- 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>

Answer 1

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 第一次单击图像（以第一个图像为例），将执行mode('ScreenShot.png') ，
1. sets smode to 'ScreenShot.png' 将smode设置为“ ScreenShot.png”
2. shows smode (='ScreenShot.png') in the <h1> 在<h1>显示smode（='ScreenShot.png'）
3. sets smode (='ScreenShot.png') as the <img> 's src 将smode（='ScreenShot.png'）设置为<img>的src
4. calls run(), which changes the onclick handler for the button but never actually opens the modal! 调用run（），该操作会更改按钮的onclick处理程序，但实际上不会打开模式！
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. 发生这种情况是因为按钮的onclick处理程序在上面的步骤1.4中被覆盖（它被覆盖，没有添加），而新的事件处理程序（ btn.onclick = function() { modal.style.display = "block"; } ）仅使模态可见但不更改图像源。

为什么只有一个JavaScript函数执行onClick？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-25 19:25:12

The problem 问题

Suggested solution 建议的解决方案

为什么只有一个JavaScript函数执行onClick？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-25 19:25:12

The problem 问题

Suggested solution 建议的解决方案

解决方案1
0 已采纳 2016-06-25 19:25:12