爲什麼Javascript不能通過onChange更改變量？

Question

所以這是我的代碼，我很奇怪，爲什麼變速球沒有發送警報給我或設置變量值：

var selecteduname; 
var xmlhttp; 
function changeUp() 
{ 
document.getElementById("useruname").onChange = function() { 
    selecteduname = this.value; 
    alert(selecteduname); 
updateAdduser(); 
} 


function loadXMLDoc() 
{ 

if (window.XMLHttpRequest) 
    { 
xmlhttp=new XMLHttpRequest(); 
} 
else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 

function updateAdduser() 
{loadXMLDoc(); 
xmlhttp.onreadystatechange=function() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    var json = xmlhttp.responseText; 
    var fields = JSON.parse(json); 
    Object.keys(fields).forEach(function (name) { 
    var input = document.getElementsByName(name); 
    input.value = fields[name]; 
}); 
} 
} 
xmlhttp.open("GET", "ajaxuseradd.psp?uname="+selecteduname, true); 
xmlhttp.send(); 
} 

</script> 

和

<form action="adduser.psp" method="get"> 
<fieldset> 
    <label for="uname">Username:</label> 
    <select name="uname" id="useruname" onChange="changeUp();"> 
<% 
Blah blah blah Python Code to generate option values 
%> 


<%= options %> //More Python code, this actually puts them into the select box 

</select> 

</fieldset> 
<fieldset> 
    <label for="fname">First Name:</label> 
    <input type="text" name="fname" /> 
</fieldset> 
<fieldset> 
    <label for="lname">Last Name:</label> 
    <input type="text" name="lname" /> 
</fieldset> 
<fieldset> 
    <label for="email">Email:</label> 
    <input type="text" name="email"> 
</fieldset> 

Answer 1

你缺少一個支撐。嘗試在你的代碼上運行jslint。其次，您正在嘗試爲方法changeUp中的onChange事件分配一個函數。而changeUp又是第一個調用的方法。可能導致遞歸。

感謝， RR

Answer 2

如上評論，屬性名是 「平變化」，而不是 「的onChange」。 Javascript是區分大小寫的，所以這兩個是完全不同的。

此外，您發佈的代碼看起來像是在某處丟失了}。事實上，一切都在changeUp函數中。巧合的是，它在結束腳本標記之前從不關閉。

但是，這裏還有其他事情要做。這條線在你的標記：

<select name="uname" id="useruname" onChange="changeUp();"> 

獲取完全被這一行代碼一掃而光：

document.getElementById("useruname").onChange = function() { 

以下是我會解決它。首先，JavaScript的：

function createAjax() { 
    if(window.XMLHttpRequest) 
     return new XMLHttpRequest(); 
    else 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
} 


function updateAddUser(username) { 
    var ajax = createAjax(); 
    ajax.onreadystatechange = function() { 
     if(ajax.readyState == 4 && ajax.status == 200) { 
      var json = ajax.responseText; 
      var fields = JSON.parse(json); 
      Object.keys(fields).forEach(function (name) { 
       var input = document.getElementsByName(name); 
       input.value = fields[name]; 
      }); 
     } 
    } 
    ajax.open("GET", "ajaxuseradd.psp?uname=" + username, true); 
    ajax.send(); 
} 

然後，你可以更改HTML select標籤：

<select name="uname" id="useruname" onchange="updateAddUser(this.value)"> 

說了這麼多，我會強烈建議您嘗試類似jQuery。它會使JavaScript代碼一樣微不足道：

$('#username').change(function(){ 
    $.get('ajaxuseradd.php', {uname:$(this).val()}, function(data, status, xhr) { 
     $.each(data, function(key,value) { 
      $('#'+key).val(value); 
     }); 
    }, 'json'); 
}); 

是的，這真的很簡潔，我知道。更意味深長，它可以被寫成這樣：

$('#username').change(function() { 
    var userName = $(this).val(); 
    $.ajax({ 
     type: 'GET', 
     url: 'ajaxuseradd.php', 
     data: { 
      uname: userName 
     }, 
     success: function(data, status, xhr) { 
      $.each(data, function(key, value) { 
       $('#' + key).val(value); 
      }); 
     }, 
     dataType: 'json' 
    }) 
});