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?
<!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>