ボタンを押すとテキストボックスに自動入力する機構

Question

###前提・実現したいこと

head部

<script type="text/javascript"> window.onload = function() { var buttons = document.getElementById('colors').getElementsByTagName('button'); for (var i = 0, n = buttons.length; i < n; i++) { buttons[i].onclick = function() { document.getElementById('result').value = this.value; } } } </script>

body部

<form id="colors" action="#"> <button type="button" value="赤色">暖かい色</button> <button type="button" value="青色">お空の色</button> <input id="result" type="text" value="" /> </form>

といったかんじのサンプルコードがあったのですがテキストボックスの指定をidセレクタにすると都合が悪いのでnameに変更するとうまく行きません…

###やってみた事

head部

<script type="text/javascript"> window.onload = function() { var buttons = document.getElementById('colors').getElementsByTagName('button'); for (var i = 0, n = buttons.length; i < n; i++) { buttons[i].onclick = function() { document.【getElementsByName】('result').value = this.value; } } } </script>

body部

<form id="colors" action="#"> <button type="button" value="赤色">暖かい色</button> <button type="button" value="青色">お空の色</button> <input 【name="result"】 type="text" value="" /> </form>

【】変更点

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

document.getElementsByName('result')[0].value = this.value;

このようにしてください。
idはコントロールを単品で識別します。
nameは、同じnameがついたコントロールをグループ化します。
なので、
getElementsByName();
の戻り値は、"result"という name がついたコントロールの配列です（今回は1つしかありませんが）
その最初(インデックス0)の要素のvalueを書き換えることになります。

Answer 2

getElementById
getElementsByName
この2つ。

「Element」と
「Elements」で違います。

getElementByIdで取れるのは一つ、
getElementsByNameで取れるのは複数です。

なので何個目なのかを指定しなければなりません。1つしかないのなら
document.getElementsByName('result')[0].value = this.value;
とすればたぶん動くでしょう。