为什么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' 
    }) 
});