Javascript变量未定义且onchange不起作用_Javascript_Variables_Undefined_Onchange

Javascript变量未定义且onchange不起作用

javascript variables

Javascript变量未定义且onchange不起作用,javascript,variables,undefined,onchange,Javascript,Variables,Undefined,Onchange,我是Javascript的初学者，所以对于专家来说，这可能很容易修复。我正在做这个：源代码如下其思想是，将图像拖动到白色框中会向文本框添加一个值，然后文本框会触发mysql查询并显示一些数据。但我有两个问题： 1）将图像拖动到白色框中时，它只显示“未定义”，而不是显示图像的值属性 2）当我硬编码一个值而不是使用变量（第17行）时，它会很好地进入文本框，但不会触发mysql查询，尽管如果您直接在框中键入它，它会触发 <html> <head> <style ty

我是Javascript的初学者，所以对于专家来说，这可能很容易修复。我正在做这个：源代码如下

其思想是，将图像拖动到白色框中会向文本框添加一个值，然后文本框会触发mysql查询并显示一些数据。但我有两个问题：

1）将图像拖动到白色框中时，它只显示“未定义”，而不是显示图像的值属性

2）当我硬编码一个值而不是使用变量（第17行）时，它会很好地进入文本框，但不会触发mysql查询，尽管如果您直接在框中键入它，它会触发

<html>
<head>
<style type="text/css">
#div1 {width:175px;height:97px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}
function allowDrop(ev){
    ev.preventDefault();
}
function drop(ev){
    ev.preventDefault();
    ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
    var newtext = document.dragme.value;
    document.myform.users.value += newtext;
}
function showUser(str){
if (str==""){
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="users" onchange="showUser(this.value)">
</form>
<div id="txtHint"><b>Type "49" or "50" in the box above</b></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="49" name="dragme" value="49" src="http://www.3dsbuzz.com/wp-content/uploads/2012/06/mutantmuddsthumb.jpg" draggable="true" ondragstart="drag(event)" />
<img id="50" name="dragme" value="50" src="http://www.3dsbuzz.com/wp-content/uploads/2011/09/layton-thumb.jpg" draggable="true" ondragstart="drag(event)" />
</body>
</html>


#div1{宽度：175px；高度：97px；边框：1px实心#aaaaa；}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能下降（ev）{
ev.preventDefault（）；
appendChild（document.getElementById（ev.dataTransfer.getData（“文本”））；
var newtext=document.dragme.value；
document.myform.users.value+=newtext；
}
函数showUser（str）{
如果（str==“”）{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}
xmlhttp=新的XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“getuser.php？q=“+str，true”）；
xmlhttp.send（）；
}
在上面的框中键入“49”或“50”

不应该

var newtext = document.draging.value;

是

因为没有定义拖动。

1）图像没有内在的

值

属性。您必须对值使用

getAttribute

，或者，由于id和值相同，只需获取已删除图像的id即可：

function drop(ev){
    ev.preventDefault();
    ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
    var newtext = ev.dataTransfer.getData("Text");
    document.myform.users.value += newtext;
}

2）只有在用户更改值时，才调用更改处理程序，而不是在脚本更改值时。您必须手动触发它：

showUser(newtext);

请随意在问题中发布相关代码和标记<代码>；）对不起，@JaredFarrish因为只有一小部分代码，而且所有代码都是相关的，而且您需要查看页面才能理解我所说的内容，所以我认为人们只需查看源代码就会更容易。我会编辑它，确保我以后在这里发布代码。很抱歉，我快速更改并用打字错误保存它时，您一定看过了，但这不是最初的问题。np，我只是快速查看了您的代码并看到了打字错误。但正如你所说，这不是问题所在P

showUser(newtext);