Javascript onChange 事件不会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10952804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onChange event doesn't trigger
提问by Mayer M
I use Internet Explorer 8 and Sharepoint 2007.
我使用 Internet Explorer 8 和 Sharepoint 2007。
Briefing: I have a NewForm with various fields from a list. I need, using javascript, from one of the fields, to get the value introduced by the user (in a textBox) and paste it on other field (other textBox) in the same page, using onChange.
简报：我有一个 NewForm，其中包含列表中的各种字段。我需要使用 javascript，从其中一个字段中获取用户引入的值（在文本框中），然后使用 onChange 将其粘贴到同一页面中的其他字段（其他文本框）上。
Problem: I'm a JavaScript newbie, and I can't set the event 'onChange' to trigger my function, or at least to trigger an 'alert("Test") ... or simply I'm doing it wrong and don't know why (more likely)...
问题：我是 JavaScript 新手，我无法设置事件 'onChange' 来触发我的函数，或者至少触发一个 'alert("Test") ... 或者只是我做错了不知道为什么（更有可能）...
Let's assume the field I want to work with has as FieldName="IDTeam", type="text" and id="id_TeamField".
让我们假设我想要使用的字段具有 FieldName="IDTeam"、type="text" 和 id="id_TeamField"。
//My JS below "PlaceHolderMain"
_spBodyOnLoadFunctionNames.push("setTxtBoxesValues");
function setTxtBoxesValues()
{
//snipped
getField('text','IDTeam').onChange = function(){alert('Test')};
//"getField('text', 'IDTeam).onChange = function(){myFunction()};"
//If I want to call myFunction() when onChange event is triggered
}
Also, instead of getField, tried this:
另外，而不是getField，尝试了这个：
document.getElementById('id_TeamField').onChange = function(){alert('Test')};
If I want to call myFunction() when onChange event is triggered
如果我想在触发 onChange 事件时调用 myFunction()
Any idea of what I'm doing wrong?
知道我做错了什么吗？
回答by NSF
onchange is an event so either you put it in the tag like this:
onchange 是一个事件，所以你要么把它放在这样的标签中：
<input type="text" id="IDTeam" onchange="(call function here)" />
or you apply addEventListener to that DOM object:
或者您将 addEventListener 应用于该 DOM 对象：
document.getElementById("IDTeam").addEventListener("change", function() {//call function here});
in IE6 you may need: (not sure if it works as few people are using ie6 nowadays)
在 IE6 中，您可能需要：（不确定它是否有效，因为现在很少有人使用 ie6）
document.getElementById("IDTeam").attachEvent("onchange", function() {//call function here} )
回答by PitaJ
Do this:
做这个：
window.onload = function() {
document.getElementById('id_TeamField').addEventListener('change', function() {
alert('test');
});
};
Or with jQuery:
或者使用 jQuery：
$('#id_TeamField').on('change', function() {
alert('test');
});
回答by Beau Bouchard
You can do this by
你可以这样做
Adding an event listener
添加事件监听器
document.getElementById('id_TeamField').addEventListener('change', function(){alert('test');});
or
或者
Adding onChange to the tag
将 onChange 添加到标签
<select onChange='function() { alert('test');}' name='IDTeam' id='id_TeamField' >
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
回答by Michael Guild
this is a little redundant to what everyone else is saying but share since it's more direct:
这对于其他人所说的有点多余，但分享一下，因为它更直接：
const select = document.getElementById('select')
const newText = document.getElementById('newText')
select.addEventListener("change", e => {
console.log(e.target.value)
newText.value = e.target.value
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<select id="select">
<option value="url1">tool_ver1</option>
<option value="url2">tool_ver2</option>
<option value="url2" selected >tool_ver3</option>
</select>
<button type="submit">Retrieve New Release App Options</button>
<div class="textInput spacer">
<h2>New Release App Options</h2>
<textarea id="newText"></textarea>
</div>
</body>
</html>