I'm combing two scripts work fine in their own The combined script only has one onkeyup event. Everything works as expected until I enter something in the input box that's produced by the only onclick event in the script.

Here's my work. Why doesn't the onkeyup event work?

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function popup(popup_name) {
  document.getElementById(popup_name).style.display ='block';
}
function showHint(str) {
  if (str.length==0) {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else {
   	  // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      var div = document.createElement('div');
      div.setAttribute('id', 'link_container');
      div.style.backgroundColor = 'red';
      div.style.width = '300px';
      div.style.height = '100px';
      div.style.margin = '-15px 0px 0px 75px';
      var txt=xmlhttp.responseText;
      var strA = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop 
      var str = txt.substr(txt.indexOf(",")+1);  //cut 1st position from string and save remaining info
      for (i=0; i<=strA; i++){
	var newLink = document.createElement('a'); //create anchor
	var linkName = str.slice(0,str.indexOf(" ,")+1);
	var linkName = linkName.split(' ').join(''); 
        newLink.href = "http://localhost/" + linkName+".php";
        newLink.innerHTML = linkName;
	var str = str.substr(str.indexOf(",")+1);
	div.appendChild(newLink);
	var newBr = document.createElement('br'); //create break
	div.appendChild(newBr);
      }
    document.getElementById('link_container').appendChild(newLink);
    } 
  }
  xmlhttp.open("GET","gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
<style type="text/css">
#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
.middle {height:100%; display:table; margin:0 auto;}
.inner {vertical-align:middle; display:table-cell;}
#firstPopupDiv {width:300px;height:300px;background-color:white;margin:40px 0px 0px 0px;}
</style>
</head>
<body>
<h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1> 
<div id="outer" >
  <div class="middle">
    <div class="inner">
      <div id="firstPopupDiv"> 
       	<a href="http://localhost/first_popup_div4.html">close popup</a> 
		<form>
          First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>