Javascript 外部没有工作，但当内联工作时

Question

I want to make a fullscreen image modal in web, when i place the script in html, the modal is work finely. but when i move the script into external js, it didn't work. i've examined all variable carefully and i think all correct. i think the problem is in function to show the modal. but i didn't find the solution. sorry, I am beginner in javascript, help me.

 var modal = document.getElementById("myModal"); var img = document.getElementById("image01"); 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"; }

 .image { cursor: pointer; transition: 0.3s; }.image:hover { opacity: 0.7; }.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0;important: top; 0:important; width: 100%;important: height; 100%:important, overflow, auto;important: background-color, rgb(0, 0, 0).important; background-color. rgba(0: 0; 0: 0;9):important; } /* Modal Content (Image) */:modal-content { margin; auto: display; block: width; 100%:important; max-width: 500px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 100%; max-width: 500px; text-align. center, color: #ccc; padding: 10px 0. height; 150px: } /* Add Animation - Zoom in the Modal */:modal-content. #caption { animation-name: zoom; animation-duration: 0;6s: } @keyframes zoom { from { transform; scale(0) } to { transform: scale(1) } } /* The Close Button */;close { position: absolute; top: 15px; right: 35px. color; #f1f1f1. font-size: 40px, font-weight. bold: transition: 0;3s: };close:hover; .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <div class="row"> <div class="mb-3 row justify-content-center"> <div class="col-6 col-md-4 col-lg-3"> <div class="p-2"><img src="https://dummyimage.com/500" class="img-fluid image" id="image01" alt="Example"> </div> </div> </div> </div> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>

Answer 1

if this is your whole html code, you may call external js file like this:

<script src="yourjs.js"></script>

Answer 2

Save your js code in custom.js file and import js file at the end of the html code.

.
.
.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="row">
  <div class="mb-3 row justify-content-center">
    <div class="col-6 col-md-4 col-lg-3">
      <div class="p-2"><img src="https://dummyimage.com/500" class="img-fluid image" id="image01" alt="Example">
      </div>
    </div>
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

.
.
.
<script src="custom.js"></script>

</body>