OPの問題を修正した既に与えられた答えに加えて、OPはマークアップとコードの分離について考えるかもしれません。したがって、html要素マークアップ内でインラインコードを使用しません。
input、buttonなどの特定のフォームコントロールをホストするhtml form要素を使用することも強く推奨されます。 "DOM Level 0"フォームコレクションの使用も旧式ではありません。次の例で提供されるようなイベント委譲は、フォームに動的に追加される他のコントロールがある場合に役立ちます。新しく追加された各フォームコントロールにイベントハンドラを登録することに注意する必要はありません。そして最後に、[変更]イベントに登録すると、ラジオのコレクションにすべての変更をキャプチャします...
function isMercedesTransferType(elmNode) {
return ((elmNode.type === 'radio') && (elmNode.name === 'mercedes'));
}
function handleVipTransferChange(evt) {
var elmNode = evt.target;
if (isMercedesTransferType(elmNode) && elmNode.checked) {
console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value);
}
}
function initializeVipTransfer() {
document.forms['mercedes-vip-transfer'].addEventListener('change', handleVipTransferChange, false);
}
initializeVipTransfer();
.as-console-wrapper { max-height: 100%!important; top: 70px; }
<form class="form-group" name="mercedes-vip-transfer">
<legend>Mercedes VIP transfer*:</legend>
<label>
<input type="radio" name="mercedes" value="yes">
<span>Yes</span>
</label>
<label>
<input type="radio" name="mercedes" value="no">
<span>No</span>
</label>
</form>
直接必要なフォームコントロールを初期化に対処する別の方法は、ここに実証されます。.. 。
function isMercedesTransferType(elmNode) {
return ((elmNode.type === 'radio') && (elmNode.name === 'mercedes'));
}
function handleVipTransferChange(evt) {
var elmNode = evt.target;
if (elmNode.checked) {
console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value);
}
}
function initializeVipTransfer() {
var list = document.forms['mercedes-vip-transfer'].elements['mercedes'];
Array.from(list).filter(isMercedesTransferType).forEach(function (elmNode) {
elmNode.addEventListener('change', handleVipTransferChange, false);
});
}
initializeVipTransfer();
.as-console-wrapper { max-height: 100%!important; top: 70px; }
<form class="form-group" name="mercedes-vip-transfer">
<legend>Mercedes VIP transfer*:</legend>
<label>
<input type="radio" name="mercedes" value="yes">
<span>Yes</span>
</label>
<label>
<input type="radio" name="mercedes" value="no">
<span>No</span>
</label>
</form>
...とちょうどが「最新」があれば、それを切り上げるために DOM、1はquerySelectorおよび/またはquerySelectorAllを経由して近代的なDOMのクエリを利用して検討するかもしれない...
function handleVipTransferChange(evt) {
var elmNode = evt.target;
if (elmNode.checked) {
console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value);
}
}
function initializeVipTransfer() {
var list = document.querySelectorAll('#mercedes-vip-transfer [type="radio"][name="mercedes"]');
Array.from(list).forEach(function (elmNode) {
elmNode.addEventListener('change', handleVipTransferChange, false);
});
}
initializeVipTransfer();
.as-console-wrapper { max-height: 100%!important; top: 70px; }
<form class="form-group" id="mercedes-vip-transfer">
<legend>Mercedes VIP transfer*:</legend>
<label>
<input type="radio" name="mercedes" value="yes">
<span>Yes</span>
</label>
<label>
<input type="radio" name="mercedes" value="no">
<span>No</span>
</label>
</form>
は 'getElementByName'が有効な機能ではない、おそらくあなたは意味：問題をデバッグするとき、' getElementsByName'（複数の要素） – musefan
おかげでたくさんmusefan <3 – Dounia
は、ブラウザのコンソール（ほとんどのブラウザではF12）に目が離せない、そこのエラーがあなたのために問題を指摘していたでしょう – musefan