Question

Everytime I choose a drop down option instead of displaying the data retrieved from MySQL through AJAX it displays undefined instead if I place the showUser under window load and if I place Showuser outside of window load it says Uncaught ReferenceError: showUser is not defined.

Says showUser undefined:

 <script type='text/javascript'>
  //<![CDATA[ 
  window.addEvent('load', function() {
  document.getElementById("reset").onclick = function() {
   document.getElementById("names").innerHTML = "";

var saved = JSON.parse(localStorage["numbers"] || "[]");
localStorage.clear()
    saved.length = 0;





};

function bindName() {
    var inputNames = document.getElementById("names").getElementsByTagName("input");
    for (var i = 0; i < inputNames.length; i++) {
        inputNames[i].onkeydown = function() {
            if (this.value == "") {
                setTimeout(deletename(this), 1000);
            }
        }
    }
}





function deletename(name) {
    if (name.value == "") {
        document.getElementById("names").removeChild(name);
    }
}



//one function
function showUser(str)
{
if (str=="")
  {
  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 myString = xmlhttp.responseText;

var mySplitResult = myString.split("*");


    document.getElementById("number").innerHTML+=mySplitResult[1];


        var num1 = mySplitResult[1];



    var itemsToTest = num1.value;





        var form1 = document.getElementById("names");

        var nameOfnames = form1.getElementsByClassName("inputNames").length;

        var newGuy1 = document.createElement("input");

        newGuy1.setAttribute("class", "inputNames");
        newGuy1.setAttribute("id", nameOfnames);
        newGuy1.setAttribute("type", "text");
        newGuy1.setAttribute("value", num1.value);



        form1.appendChild(newGuy1);
        num1.value = "";
        bindName();

    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
  });
  //]]>



  </script>

HTML:

 <h1>Enter Name</h1>
<div id="mainName">
    <h2>name</h2>
    <label for="name">Add Names: </label>
    <input id="name" type="text">
    <button id="addName">Add</button>
     <button id="reset" class="formbuttonReset">Reset</button>
    <form>
        <div id="names">

        </div>
        <input METHOD="POST" action="text.php" type="submit" value="Submit">
    </form>
</div>





<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Achau</option>
<option value="2">Ravi</option>
<option value="3">Justin</option>
</select>
</form>
<br />


<div id="txtHint">
<b><table>
<tr>
<th>Email: <div id="email"></div></th>
<th>Number: <div id="number"></div></th>


</tr></b></div>

However if I move the show user outside of window on load function it adds undefined to div:

PVG I put the showUser into window.onload’s scope and did what you said and when I choose an option from drop down nothing happens and I get JS error showUser not defined…
EDIT:

 //<![CDATA[ 
  window.addEvent('load', function() {
  document.getElementById("reset").onclick = function() {
   document.getElementById("names").innerHTML = "";

var saved = JSON.parse(localStorage["numbers"] || "[]");
localStorage.clear()
    saved.length = 0;





};

//one function
function showUser(str)
{
if (str=="")
  {
  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 myString = xmlhttp.responseText;

var mySplitResult = myString.split("*");


    document.getElementById("number").innerHTML+=mySplitResult[1];


        var num1 = mySplitResult[1];



    var itemsToTest = num1.value;





        var form1 = document.getElementById("names");

        var nameOfnames = form1.getElementsByClassName("inputNames").length;

        var newGuy1 = document.createElement("input");

        newGuy1.setAttribute("class", "inputNames");
        newGuy1.setAttribute("id", nameOfnames);
        newGuy1.setAttribute("type", "text");
        newGuy1.setAttribute("value", num1.value);



        form1.appendChild(newGuy1);
        num1.value = "";
        bindName(this.value);

    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}


function bindName(name){
    var inputNames = document.getElementById("names").getElementsByTagName("input");
    for (var i = 0; i < inputNames.length; i++) {
        inputNames[i].onkeydown = function() {
            if (name == "") {
                setTimeout(deletename(this), 1000);
            }
        }
    }
}





function deletename(name) {
    if (name.value == "") {
        document.getElementById("names").removeChild(name);
    }
}




  });
  //]]>

Answer 1

You have to modify bindNames() to accept a parameter name and use it instead of this.value. Like so:

function bindNames(name) {
    // ..
    if (name == "") {
        // ...
    }
}

And from showUser(), you’ll have to call pass along the parameter, like this:

bindNames(this.value);

Edit: I’ve taken another look at your code and I must admit I find it hard to figure out what you’re trying to do, partly because you haven’t really told us and partly because some of the code just doesn’t make any sense. Things like this:

var nameOfnames = form1.getElementsByClassName("inputNames").length;

I haven’t got a clue what you’re trying to do! Do you know? Do you remember what you were trying to do when you wrote this?

Anyway, I’ve stripped down the problem to the bare minimum. Have a look: http://jsfiddle.net/jNkR3/3/

It probably doesn’t do what you want at all, but have a look at it anyway. See if you can follow it and take it from there. Don’t add things like XHR and localStorage until you’re certain the core functionality is working as it should.

Also, it really helps (for yourself) to keep your code readable. One effective way of doing this is to keep your code short. If you notice that you need 5 lines of code to do one “thing”, it’s time to stop and think. Can you describe in a few words what those 5 lines are doing? If so: make a function out of it! You’ll have replaced 5 lines of code with one function call, which makes the code much easier to read.

If you need any more help, you’re better off posting your problem on a forum. Stack Overflow really isn’t meant for long discussions.