title: HTML Button click seems to call wrong function
body: <p>I'm developing a web UI using bootstrap that calls a backend Java webservice to retrieve data from the database and display it in a table. I have a function that gets called as such:</p>
  
  <pre><code>&lt;body onload="refreshVOI()"&gt;
  </code></pre>
  
  <p>This is working as expected. However, I also have a search button that shoots off another request with the search value as a parameter. For some reason, though, it seems that this button click is calling refreshVOI() again. See the snippets below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 
   * To change this license header, choose License Headers in Project Properties.
   * To change this template file, choose Tools | Templates
   * and open the template in the editor.
   */
  var voiDataArray = [];
  
  function makeHttpObject() {
      try {
          return new XMLHttpRequest();
      } catch (error) {
          alert("error");
      }
      try {
          return new ActiveXObject("Msxml2.XMLHTTP");
      } catch (error) {
          alert("error");
      }
      try {
          return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (error) {
          alert("error");
      }
      throw new Error("Could not create HTTP request object.");
  }
  
  function refreshVOI() {
      // Find a &lt;table&gt; element with id="VOITable":
      var VOITable = document.getElementById("VOITable");
      var tableRows = VOITable.getElementsByTagName('tr');
      var rowCount = VOITable.rows.length;
      console.log("Getting all alerts...");
      for (var r = 1; r &lt; rowCount; r++) {
          VOITable.deleteRow(-1);
      }
  
      var request = makeHttpObject();
      var xmlDoc;
      var parser;
      var x, i;
      var vois, voi;
      request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest", true);
      request.send();
      request.onreadystatechange = function () {
  
          if (request.readyState == 4)
          {
              console.log("data " + request.responseText.toString());
              parser = new DOMParser();
              vois = parser.parseFromString(request.responseText.toString(), "text/xml");
              voi = vois.documentElement.childNodes;
  
              for (i = 0; i &lt; voi.length; i++)
              {
                  var row = VOITable.insertRow(-1);
  
                  // Insert new cells (&lt;td&gt; elements) at the 1st and 2nd position of the "new" &lt;tr&gt; element:
                  var cell1 = row.insertCell(0);
                  var cell2 = row.insertCell(1);
                  var cell3 = row.insertCell(2);
                  var cell4 = row.insertCell(3);
                  var cell5 = row.insertCell(4);
                  var cell6 = row.insertCell(5);
                  var cell7 = row.insertCell(6);
                  var cell8 = row.insertCell(7);
  
                  // Add some text to the new cells:
                  cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
                  cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
                  cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
                  cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
                  cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
                  cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
                  cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
                  cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
              } // end of for loop
          }  // end of if statement
          request.close();
  
      }; // end of fucntion
  } // end of refreshSales function
  
  function searchVOI(search_val) {
      if (search_val.length &gt; 0) {
          var form = document.getElementById('myInput');
          var search_val = form.elements.searchfield.value;
          console.log("Searching for VOI by license plate: " + search_val);
          // Find a &lt;table&gt; element with id="VOITable":
          var VOITable = document.getElementById("VOITable");
          var tableRows = VOITable.getElementsByTagName('tr');
          var rowCount = VOITable.rows.length;
          console.log("get table");
          for (var r = 1; r &lt; rowCount; r++) {
              VOITable.deleteRow(-1);
          }
  
          var request = makeHttpObject();
          var xmlDoc;
          var parser;
          var x, i;
          var vois, voi;
          request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest"+search_val, true);
          request.send();
          request.onreadystatechange = function () {
  
              if (request.readyState == 4)
              {
                  console.log("data " + request.responseText.toString());
                  parser = new DOMParser();
                  vois = parser.parseFromString(request.responseText.toString(), "text/xml");
                  voi = vois.documentElement.childNodes;
  
                  for (i = 0; i &lt; voi.length; i++)
                  {
                      var row = VOITable.insertRow(-1);
  
                      // Insert new cells (&lt;td&gt; elements) at the 1st and 2nd position of the "new" &lt;tr&gt; element:
                      var cell1 = row.insertCell(0);
                      var cell2 = row.insertCell(1);
                      var cell3 = row.insertCell(2);
                      var cell4 = row.insertCell(3);
                      var cell5 = row.insertCell(4);
                      var cell6 = row.insertCell(5);
                      var cell7 = row.insertCell(6);
                      var cell8 = row.insertCell(7);
  
                      // Add some text to the new cells:
                      cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
                      cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
                      cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
                      cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
                      cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
                      cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
                      cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
                      cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
                  } // end of for loop
              }  // end of if statement
              request.close();
          }; // end of fucntion
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*
  To change this license header, choose License Headers in Project Properties.
  To change this template file, choose Tools | Templates
  and open the template in the editor.
  */
  /* 
      Created on : Apr 20, 2020, 9:37:46 PM
      Author     : ryan
  */
  
  body {
    padding: 0;
    margin: 0;
    background: #212121;
    color: #f5f5f5;
  }
  .table-dark {
      background: #212121;
  }
  .navbar {
      background: #424242;
  }
  .form-control {
      background: #424242;
      border: none;
      color: #212121;
  }
  .d-flex {
      margin-left: 10%;
      margin-right: 10%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--
  To change this license header, choose License Headers in Project Properties.
  To change this template file, choose Tools | Templates
  and open the template in the editor.
  --&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Vehicles of Interest&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="icon" 
                type="image/png" 
                href="assets/mdgov-fav-icon.png"&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
          &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="vehiclesOfInterest.js"&gt;&lt;/script&gt;   
          &lt;link rel="stylesheet" type="text/css" href="main.css"
      &lt;/head&gt;
  
          &lt;body onload="refreshVOI()"&gt;
  
              &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
                  &lt;img src="./assets/mdgov-fav-icon.png" class="navbar-brand" href="#"&gt;&lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                      &lt;ul class="navbar-nav mr-auto"&gt;
                          &lt;li class="nav-item active"&gt;
                              &lt;a class="nav-link" href="#" style="font-size: x-large"&gt;Dashboard&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;form class="form-inline my-2 my-lg-0"&gt;
                          &lt;input id="myInput" class="form-control form-control-md" type="search" placeholder="Search alerts..." aria-label="Search"&gt;
                          &lt;button id="searchBtn" onclick="searchVOI()" class="btn btn-outline-info my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
  
              &lt;br&gt;
              &lt;div class='d-flex justify-content-between'&gt;
                  &lt;div&gt;
                      &lt;h2&gt;Active Alerts&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class='btn-group'&gt;
                          &lt;button onclick="refreshVOI()" type='button' class='btn btn-info'&gt;Refresh&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class ="container container-fluid"&gt;
                  &lt;table class="table table-hover table-dark table-borderless" id="VOITable"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;License Plate&lt;/th&gt;
                              &lt;th&gt;Reason&lt;/th&gt;
                              &lt;th&gt;Make&lt;/th&gt;
                              &lt;th&gt;Model&lt;/th&gt;
                              &lt;th&gt;Year&lt;/th&gt;
                              &lt;th&gt;Color&lt;/th&gt;
                              &lt;th&gt;Owner&lt;/th&gt;
                              &lt;th&gt;Owner Phone&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="myTable" /&gt;
                  &lt;/table&gt;
              &lt;/div-&gt;
          &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For some reason, the page just seems to refresh and load all data as it does before. I don't see the log message from searchVOI() showing up in console at all. I'm wondering if refreshVOI() is being called somehow on button click and overwriting the search results.</p>
  
  <p>Any help would be greatly appreciated!!!</p>