Javascript 当我选择下拉选项时，为什么这个JS不向div添加数据？

每次我选择下拉选项而不是显示通过AJAX从MySQL检索的数据时，如果我将showUser置于窗口加载下，则显示undefined；如果我将showUser置于窗口加载之外，则显示Uncaught ReferenceError:未定义showUser

表示showUser未定义：

 <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:

但是，如果我将show user移出window on load函数，它会将undefined添加到div中：

PVG我把showUser放到window.onload的作用域中，按照你说的做了，当我从下拉列表中选择一个选项时，什么都没有发生，我得到JS错误showUser未定义。。。 编辑：

showUser仅在window.addEvent'load'，函数{的上下文中定义。您需要将其移动到全局范围，或者需要将其定义更改为类似以下内容：

window.showUser = function (str)
{
//...
}

顺便说一句，用制表符格式化你的代码，这将为你节省很多麻烦

编辑：没有注意到问题的另一部分-myString.split*可能没有像您预期的那样工作，但您真正应该做的是添加调试器；关键字并使用Firefox的Firebug或其他内置调试器进行调试

编辑：第三次查看PPvG也是正确的，但我只需将bindName；更改为bindName.callthis

编辑：我想知道你什么时候会承认你是故意这样做的；-。但我认真地认为这一行是未定义的东西的问题：var itemsToTest=num1.value；+另一个num1.value。你需要了解一些JS调试器来跟踪这样的东西，并真正更好地格式化和规划你的代码。

你必须修改fy bindNames以接受参数名并使用它而不是this.value。如下所示：

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

在showUser中，您必须调用参数传递，如下所示：

bindNames(this.value);

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

编辑：我又看了一遍你的代码，我必须承认我发现很难弄明白你想做什么，一部分是因为你没有告诉我们，另一部分是因为有些代码根本没有任何意义。比如：

bindNames(this.value);

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

我不知道你想做什么！你知道吗？你还记得你写这篇文章时想做什么吗

无论如何，我已经把问题简化到最低限度。看一看：

它可能根本不能满足您的需要，但还是要看一看。看看您是否可以遵循它并从中获得它。在确定核心功能正常工作之前，不要添加诸如XHR和localStorage之类的内容

另外，保持代码可读性对你自己也很有帮助。一个有效的方法是保持代码简短。如果你注意到你需要5行代码来做一件事，那么是时候停下来思考了。你能用几句话描述一下这5行代码在做什么吗？如果是这样的话：用它来做一个函数！你已经替换了5行代码了只需一个函数调用，这使代码更易于阅读

---

如果您需要更多帮助，最好在论坛上发布您的问题。堆栈溢出真的不适合长时间讨论。

我相信他已经注意到：[…]如果我移动[showUser]在window on load函数之外，它将未定义的代码添加到div中。无论您使用的是制表符还是空格，只要您有一个像样的编辑器vim、emacs等等，并在投入生产之前最小化JS。制表符的要点是对代码块使用正确的缩进。我不想讨论制表符与空格之间的争议；-。I dontk现在该怎么做？在我将window.showUser=function str添加到showUser之后，它的一个又一个错误现在我得到的错误是BindName没有定义。如果我将window.BindName=function name添加到BindName函数，我没有得到任何错误，但是在div中添加了undefined…为什么你认为itemsToTest是问题？它在代码中没有做任何事情。…不以任何方式影响它有没有什么具体的原因让你不节省一些工作并使用jQuery？我是JS新手，使用jQuery会让我更加困惑…想要编写纯JavaScript是一个很好的愿望。使用JS框架而不了解纯JavaScript就像在自动驾驶仪上驾驶飞机而不知道如何驾驶飞机一样当然，我夸大了这一点。另一方面，框架非常有用，并提供了一个很好的跨浏览器层。：-纯JavaScript？最好称它为纯DOM，与浏览器特定的差异-与JavaScript语言无关。因此，即使是初学者，在使用jQuery时也会更容易。自从jQue之后与纯DOM/JS相比，ry是相当新的，很可能您找不到针对纯JS的那些非常糟糕的示例代码。