2012-08-26 4 views
-1

저는 초보자 인 Javascript이므로 전문가가 쉽게 수정할 수 있습니다. 나는이 일을하고있다 : http://www.3dsbuzz.com/receng/test.php 소스 코드는 아래있다.Javascript 변수 undefined 및 onchange가 작동하지 않습니다.

이미지를 흰색 상자로 끌어 와서 텍스트 상자에 값을 추가하면 텍스트 상자에 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> 
+6

관련 코드 및 마크 업을 질문에 자유롭게 게시하십시오. ';)' –

+0

죄송합니다. @JaredFarrish 코드가 조금 밖에 없기 때문에 모든 관련이 있습니다. 내가 뭘 말하고 있는지 이해하려면 페이지를 볼 필요가 있기 때문에 사람들이보기에 더 쉬울 거라고 생각했습니다. 소스 코드에서. 앞으로 편집 할 코드를 여기에 올리도록하겠습니다. –

답변

0

1) 이미지에는 고유 한 value 속성이 없습니다. 어느 쪽이든 당신은 ID와 값이 동일하기 때문에, 단지 삭제 된 이미지의 ID를 가져, 값에 getAttribute를 사용하는, 또는 :

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); 
+0

놀라운! 정말 고맙습니다. –

0

하지

var newtext = document.draging.value; 

var newtext = document.dragimg.value; 

이어야한다.

+0

죄송합니다. 빠른 변경을하고 오타를 사용하여 저장하는 동안 보았어야합니다. 원래 문제는 아닙니다. –

+0

np, 나는 당신의 코드를 보았고 오타를 보았습니다. 하지만 당신이 말했듯이 그것은 문제가 아닙니다. : p – hamon

관련 문제