清除Javascript中不需要的代码重复

有没有一种方法不在JavaScript中复制相同的代码，只需编写一次并使用两次？ 当我尝试使用这个类时，它没有起作用

HTML:

---

使用下面的代码块。通过传递动态图像

ID

，通过函数调用相同的代码块

var modal = document.getElementById("myModal");
var img = document.getElementById("Image");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
    modal.style.display = "none";
}
/*duplicate */
var modal = document.getElementById("myModal");
var img = document.getElementById("Imagee");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
    modal.style.display = "none";
}

&时代；

为什么要重复？您是否直接在html代码中编写javascript？始终将JS环绕在tagsI中不要将html与JS混合，这只是html和JS的一个示例。您可能正在寻找如何定义一个？

var modal = document.getElementById("myModal");
var img = document.getElementById("Image");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
    modal.style.display = "none";
}
/*duplicate */
var modal = document.getElementById("myModal");
var img = document.getElementById("Imagee");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
    modal.style.display = "none";
}

<img id="Image" src="1.jpg" alt="1" style="width:50%;max-width:30%">
<img id="Imagee" src="2.png" alt="1" width="300" height="200" />
 <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
</div>
<script type="text/javascript">

modalContent("Image");
modalContent("Imagee");

function modalContent(imageId) {

    var modal = document.getElementById("myModal");
    var img = document.getElementById(imageId);
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
        modal.style.display = "none";
    }

}   
</script>