onload 및 onchange를 실행하는 javascript

Question

사용자가 입력 상자에 값을 입력 할 때 onchange 이벤트를 사용하여 실행되는 javascript가 있습니다.

스크립트는

<script type="text/javascript"> 
    function showUser(userNumber, str) 
    { 
    if (str=="") 
    { 
     document.getElementById("txtHint" + userNumber).innerHTML=""; 
     return; 
    }  
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     //document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
     var responseText = xmlhttp.responseText; 
     var description = responseText; 
     var warehouse = ""; 
     var sellingUnits = ""; 
     if (responseText.indexOf("NOT A VALID") == -1) 
     { 
      description = responseText.substring(12, responseText.indexOf(",Warehouse:")); 
      warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:")); 
      sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+14); 
     } 

     document.getElementById("whse" + userNumber).innerHTML = warehouse; 
     document.getElementById("txtHint" + userNumber).innerHTML = description; 
     document.getElementById("su" + userNumber).innerHTML = sellingUnits; 

     } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
    } 
</script> 

이며, 형태는 언급 한 바와 같이

<form name="orderform" id="orderform" action="newsale.php" method="post"> 

<table border=1>  

<tr> 
<td>Product Code</td> 
<td>Description</td> 
<td>Warehouse</td> 
<td>Selling Units</td> 
</tr> 
<tr id="r1"> 
    <td width=100> 
     <input size=10 type=number id=sku1 name=sku1 value="1182" onchange="showUser(1, this.value)"> 
    </td> 
    <td width=280> 
     <div align="left" id="txtHint1">&nbsp;</div> 
    </td> 
    <td width=100> 
     <div align="left" id="whse1">&nbsp;</div> 
    </td> 
    <td width=100> 
     <div align="left" id="su1">&nbsp;</div> 
    </td> 
</tr> 
<tr id="r2"> 
    <td> 
     <input size=10 type=number id=sku2 name=sku2 value="1183" onchange="showUser(2, this.value)"> 
    </td> 
    <td> 
     <div align="left" id="txtHint2">&nbsp;</div> 
    </td> 
    <td> 
     <div align="left" id="whse2">&nbsp;</div> 
    </td> 
    <td width=100> 
     <div align="left" id="su2">&nbsp;</div> 
    </td> 
</tr> 
<tr id="r3"> 
    <td> 
     <input size=10 type=number id=sku3 name=sku3 value="1174" onchange="showUser(3, this.value)"> 
    </td> 
    <td> 
     <div align="left" id="txtHint3">&nbsp;</div> 
    </td> 
    <td> 
     <div align="left" id="whse3">&nbsp;</div> 
    </td> 
    <td width=100> 
     <div align="left" id="su3">&nbsp;</div> 
    </td> 
</tr> 
<tr id="r4"> 
    <td> 
     <input size=10 type=number id=sku4 name=sku4 value="1046" onchange="showUser(4, this.value)"> 
    </td> 
    <td> 
     <div align="left" id="txtHint4">&nbsp;</div> 
    </td> 
    <td> 
     <div align="left" id="whse4">&nbsp;</div> 
    </td> 
    <td width=100> 
     <div align="left" id="su4">&nbsp;</div> 
    </td> 
</tr> 
</table> 
</form> 

그래서, 스크립트가 onchange를 이벤트에 대해 완벽하게 작동합니다. 각 입력 상자에 대한 값을 정의했습니다. 페이지가로드되면 해당 값에 대해 스크립트를 호출하고 실행합니다. 사용자가 값을 변경하면 새 값으로 재실행해야합니다.

페이지의 헤더 섹션에 다음 스크립트를 넣으려고했지만 작동하는 행에 일관성이 없습니다. 내 스킬이 좋지 않아서 작은 것을 놓치고 있다고 느낍니다.

<script type="text/javascript"> 
window.onload = function() { 
showUser(1, document.getElementById("sku1").value); 
showUser(2, document.getElementById("sku2").value); 
showUser(3, document.getElementById("sku3").value); 
showUser(4, document.getElementById("sku4").value); 
} 
</script> 

항상 조언을드립니다. 감사합니다 및 감사합니다, Ryan

Answer 1

롱 샷 질문의 마지막 스크립트를 의미, 기존의 코드에서 이것을 시도. xmlhttp를 함수의 지역 변수로 선언하십시오.

<script type="text/javascript"> 
    function showUser(userNumber, str) 
    { 

    var xmlhttp = null; // line aded. 
    if (str=="") 
    { 
     document.getElementById("txtHint" + userNumber).innerHTML=""; 
     return; 
    }  
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     //document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
     var responseText = xmlhttp.responseText; 
     var description = responseText; 
     var warehouse = ""; 
     var sellingUnits = ""; 
     if (responseText.indexOf("NOT A VALID") == -1) 
     { 
      description = responseText.substring(12, responseText.indexOf(",Warehouse:")); 
      warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:")); 
      sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+14); 
     } 

     document.getElementById("whse" + userNumber).innerHTML = warehouse; 
     document.getElementById("txtHint" + userNumber).innerHTML = description; 
     document.getElementById("su" + userNumber).innerHTML = sellingUnits; 

     } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
    } 
</script> 

Answer 2

스크립트를 닫는 본문 태그 바로 앞에 놓습니다. 또한

편집 .ready $ (문서)를 사용하여 다음 jQuery를 사용하여 고려 수 :을 나는