Javascript 外部沒有工作，但當內聯工作時

Question

我想在 web 中制作全屏圖像模式，當我將腳本放在 html 中時，模式工作正常。 但是當我將腳本移動到外部 js 中時，它不起作用。 我仔細檢查了所有變量，我認為都是正確的。 我認為問題出在 function 以顯示模態。 但我沒有找到解決方案。 對不起，我是 javascript 的初學者，幫幫我。

 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

如果這是您的整個 html 代碼，您可以像這樣調用外部 js 文件：

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

Answer 2

將 js 代碼保存在custom.js文件中，並在 html 代碼末尾處導入 js 文件。

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