Menu
How do I keep the red divs from building up (one under another) with each onclick event? I tested variations of removeChild(div) without success. Is removeChild(div) part of the answer and I’m just using it wrong or is there a better approach?
My script:
[code=html]<html>
<head>
<script type=”text/javascript”>
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.setAttribute(“style”,”background-color:red;”);
//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.getElementsByTagName(‘body’)[0].removeChild(div);
document.getElementsByTagName(‘body’)[0].appendChild(div);
}
}
xmlhttp.open(“GET”,”gethint.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type=”text” onkeyup=”showHint(this.value)” size=”20″ />
</form>
</body>
</html>