Question

我是Javascript的初学者，所以也许这对于专家来说很容易解决。我正在研究这个：http://www.3dsbuzz.com/receng/test.php源代码如下。

这个想法是将图像拖到白框中为文本框添加一个值，然后触发一个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>

Answer 1

不应该

var newtext = document.draging.value;

是

var newtext = document.dragimg.value;

因为没有定义拖延。

Answer 2

1）图像没有内在value属性。您必须使用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);

Javascript变量undefined和onchange无法正常工作

2 个答案: