html javascript Dropdown menu 만들기 중 오류

[SangminJe]

증상

코드를 짜고 실행 시 드롭다운 하위 메뉴가 나오지 않습니다.
페이지 요소검사 결과 캡쳐한 부분과 같은 오류가 발생하는데, 함수의 내용을 지속적으로 바꿔도 일단 변하지 않습니다.

실행환경

윈도우/ 크롬에서 실행

<!doctype html>
<html>
  <head>
    <title>Jessie</title>
    <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="colors.js" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

      </script>
  </head>

  <body>
    <div class="navbar">
      <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()">About_Jessie
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content" id="myDropdown">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
        </div>
      </div>
      <a href= "2.html">Likes</a>
      <a href= "3.html">Portfolio</a>
      <a href= "4.html">Contacts</a>
    </div>
-----------------------------------------------------------------colors.js 파일-----------

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var myDropdown = document.getElementById("myDropdown");
      if (myDropdown.classList.contains('show')) {
        myDropdown.classList.remove('show');
      }
  }
}

캡쳐

[dhchoi82]

하나의 script 태그의 src 속성을 여러 개 적어서 문제가 되는 듯 합니다.
제가 시험삼아 해보니 위와 같이 하나의 script 태그에 두 개의 src를 지정한 소스는 정상적으로 작동하지 않는 것을 확인할 수 있고,

서로 다른 script 태그에 각각의 src를 지정한 소스는 정상적으로 작동하는 것을 확인할 수 있습니다.

• a.html
• b.html
• 1.js
• 2.js