Why page reloaded after the table is created by JavaScript

There a dropdown list in <div> element.

When an item in the dropdown list is clicked, a table should be created.

However, it is found that the table is created, but the page seems refreshed.

How to keep the result ?

<style>
        #map {
            margin: 10px 10px;
            width:  560px;
            height: 560px;
            border: 1px solid #000000;
        }
        #dropdown_1 {
            margin: 10px 10px;
            position: absolute;
            top: 0;
            left: 600px;
            width:  50px;
            height: 10px;
           /*border: 1px solid #000000;*/
        }
        /* Dropdown Button */
        .dropbtn {
            background-color: #3498DB;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
  
        /* Dropdown button on hover & focus */
        .dropbtn:hover, .dropbtn:focus {
            background-color: #2980B9;
        }
        
        /* The container <div> - needed to position the dropdown content */
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        /* Dropdown Content (Hidden by Default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        
        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        
        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {background-color: #ddd}
        
        /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
        .show {display:block;}



</style>
<div id = "dropdown_1" class="dropdown">
        <button onclick="dropdown_toggle()" class="dropbtn">Dropdown</button>
        <div id="myDropdown" class="dropdown-content">
        </div>
</div>
<script src="myscripts.js">
</script>
<script>
    // document.addEventListener('keypress', logKey);
    set_drop_down_list();

    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function dropdown_toggle() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
// Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
                // console.log('hit-hit');
                // creat_traffic_table();
            }
        }
    }
} 
</script>

In myscript.js :

function set_drop_down_list(){

  var c = document.getElementById("mycanvas");
  var ctx = c.getContext("2d");
  var img = new Image();        
  img.src = './pic/mps.png';
  img.onload = () => {ctx.drawImage(img, 0, 0);};
 

  var select = document.getElementById("myDropdown");
  var options = ["Ma Wan", "Kap Shui Mun", "North Fairway", "Ha Pang", "Fairway Junction"];

  for(var i = 0; i < options.length; i++) {
      var opt = options[i];
      var el = document.createElement("a");
      el.textContent = opt;
      el.value = opt;
      el.setAttribute("href", "");
      el.onclick = function(event) {
        creat_traffic_table();
      }
      select.appendChild(el);
  }   
 
}


function creat_traffic_table(){

  var myArray = [
    {'name':'Michael', 'age':'30', 'birthdate':'11/10/1989'},
    {'name':'Mila', 'age':'32', 'birthdate':'10/1/1989'},
    {'name':'Paul', 'age':'29', 'birthdate':'10/14/1990'},
    {'name':'Dennis', 'age':'25', 'birthdate':'11/29/1993'},
    {'name':'Tim', 'age':'27', 'birthdate':'3/12/1991'},
    {'name':'Erik', 'age':'24', 'birthdate':'10/31/1995'},
]

  const body = document.body;
  tbl = document.createElement('TABLE');
  tbl.style.width = '100px';
  tbl.style.position = 'absolute';
  tbl.style.border = '1px solid black';
  tbl.style.marginLeft = "800px";
  tbl.style.marginTop  = "50px";

  for (var i = 0; i < myArray.length; i++){
    var row = `<tr>
            <td>${myArray[i].name}</td>
            <td>${myArray[i].age}</td>
            <td>${myArray[i].birthdate}</td>
          </tr>`
          tbl.innerHTML += row


  }

  body.appendChild(tbl);

}