Question

每次我选择一个下拉选项而不是通过AJAX显示从MySQL检索到的数据时，如果我将showUser放在窗口加载下，并且如果我将Showuser置于窗口加载之外，则显示未定义，并显示Uncaught ReferenceError：showUser未定义

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>

但是如果我在加载函数的窗口外移动show用户，它会向div添加undefined：

enter image description here

PVG我将showUser放入window.onload的范围并按照你所说的做了当我从下拉菜单中选择一个选项没有任何反应时我得到JS错误showUser未定义... 编辑：

 //<![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

showUser仅在window.addEvent('load', function() {的上下文中定义。您需要将其移动到全局范围或需要将其定义更改为：

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

BTW使用标签格式化您的代码，这将为您节省很多麻烦。

编辑：没有注意到问题的其他部分 - myString.split（“*”）可能没有按预期工作，但你真正应该做的是添加一个{{ 1}}关键字和调试使用Firebug（适用于Firefox）或内置调试程序供其他人使用。

编辑：第三次看PPvG也是对的，但我只想将debugger;更改为bindName();。

编辑：我想知道你什么时候会承认你故意制作了这样的代码;-)。但严重的是，我认为这一行是未定义的问题：bindName.call(this); +另一个var itemsToTest = num1.value;。你需要了解一些JS调试器来跟踪这样的事情并真正地格式化和规划你的代码。

Answer 2

您必须修改bindNames()以接受参数name并使用它代替this.value。像这样：

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

从showUser()开始，您必须调用参数传递，如下所示：

bindNames(this.value);

编辑：我再看看你的代码，我必须承认我发现很难弄清楚你要做什么，部分原因是你没有真正告诉过我们部分是因为某些代码没有使任何感觉。这样的事情：

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

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

无论如何，我已经把问题彻底解决了。 看看：http://jsfiddle.net/jNkR3/3/

它可能无法完成您想要的，但无论如何都要看看它。看看你是否可以遵循它并从那里拿走它。在确定核心功能正常工作之前，不要添加XHR和localStorage之类的东西。

此外，它（确保自己）确保您的代码可读。一种有效的方法是保持代码简短。如果你发现你需要5行代码来做一件“事情”，那就该停下来思考了。你能用几句话描述这5行是做什么的吗？如果是这样的话：用它来制作一个功能！您将使用一个函数调用替换5行代码，这使代码更容易阅读。

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

当我选择下拉选项时，为什么这个JS不会将数据添加到div中？

2 个答案: