title: How to bind click and keydown to input field in Vanilla JavaScript
body: <p>I am working on freecodecamp's wikipedia viewers project. I have got a working example but there are few things that I can't figure out how to do. </p>
  
  <p>First of all how do I execute the some AJAX request by typing in the input field and pressing enter or by clicking of the button? </p>
  
  <p>Next, when I try to type in the input field and press enter, results show in the web page. But when I try to type and enter again, new results do not show but the previous results disappear and I have to type and press enter again to get new results. </p>
  
  <p>I know there other posts using jQuery which I also don't understand and don't want to use jQuery just in plain JavaScript. </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>var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&amp;datatype=json&amp;limit=10&amp;origin=*&amp;search=';
  var inputSearch = document.myForm.search;
  var searchBtn = document.myForm.searchBtn;
  var list = document.getElementById("list");
  var random = document.getElementsByClassName('random')[0];
  
  random.addEventListener("click" , function(){
    window.open("https://en.wikipedia.org/wiki/Special:Random");
  });
  
  function requestData ( e ) {
    var inputStr = e.target.value;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
      if ( request.readyState === 4 ) {
        if ( request.status === 200 ) {
          var dataObj = JSON.parse(request.responseText);
          var titles = dataObj[1];
          var descriptions = dataObj[2];
          var links = dataObj[3];
          document.myForm.innerHTML += "&lt;h2&gt;&lt;span&gt;" + links.length + "&lt;/span&gt; results for \"" + "&lt;span&gt;" + inputStr + "&lt;/span&gt;" +"\" &lt;/h2&gt;"; 
          list.innerHTML = "";
          for ( var i = 0; i &lt; titles.length; i++ ) {
            var li = "&lt;li&gt;&lt;a target='_blank' href=" + links[i] + "&gt;" + titles[i] + "&lt;/a&gt;&lt;/li&gt;";
            list.innerHTML += li;
          }
        }
        else {
          console.log("Server responded with following error code : " + request.status);
        }
      }
    };
    
    if ( e.keyCode === 13 ) {
        console.log(e.type);
        request.open("GET" , url + inputStr);
        request.send(null);
        e.preventDefault();
    }
  
  }
  
  inputSearch.addEventListener("keydown" , requestData);
  searchBtn.addEventListener("click" , requestData);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
   display: block;
  }
  body {
   line-height: 1;
  }
  ol, ul {
   list-style: none;
  }
  blockquote, q {
   quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
   content: '';
   content: none;
  }
  table {
   border-collapse: collapse;
   border-spacing: 0;
  }
  
  /* CSS reset ends here */
  
  body {
   font-size: 16px;
   font-family: 'Oxygen', sans-serif;
   
  }
  
  .container-wrapper {
   margin: 0 auto;
   text-align: center;
   height: 100vh;
  
  }
  
  header {
   /*background-color: #fc3e5b;*/
   padding: 80px 0;
  }
  
  header h1 {
   font-family: 'Anton', sans-serif; 
   font-size: 70px;
   padding: 30px 0 80px 0;
   color: #fc3e5b;
  }
  
  form input , form button {
   padding: 10px 8px;
   font-size: 22px;
   border: 1px solid #fc3e5b;
   outline: 0;
   display: inline;
   margin: 0;
  }
  
  form button {
   background-color: #fc3e5b;
   color: #fff;
  }
  
  h2 {
   font-size: 25px;
   margin-top: 32px;
  }
  
  h2 span {
   font-weight:bold;
   color: #fc3e5b;
  }
  .random {
   padding: 22px 7px;
   border-radius: 100%;
   margin: 20px 0 15px 0;
  }
  
  .random:hover {
   border: 5px solid #fc3e6b;
  }
  
  #list {
   width: 75%;
   margin: 0 auto;
  }
  
  #list li {
   padding: 16px 8px;
   background-color: #fc3e5b;
   margin: 12px 0;
   text-align: left;
   font-size: 22px;
  }
  
  #list li a {
   text-decoration: none;
   color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt; Wikipedia Viewer &lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Anton|Oxygen" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="wikipedia.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;  
    
    &lt;div class="container-wrapper"&gt;
     &lt;header&gt;
       &lt;h1&gt; Wikipedia Viewer &lt;/h1&gt;
     &lt;form action="" name="myForm"&gt;
      &lt;input type="text" name="search" /&gt;&lt;button name="searchBtn"&gt;Search&lt;/button&gt;
      &lt;br&gt;
      &lt;button name="btnRandom" class="random"&gt; Random&lt;br&gt;Article &lt;/button&gt;
     &lt;/form&gt;
   &lt;/header&gt;
   
   &lt;div class="container"&gt;
       &lt;ul id="list"&gt;&lt;/ul&gt;
   &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="wikipedia.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>