javascriptからbuttonに直接値を設定したい

前提・実現したいこと

javascriptでonload時にbuttonの中に任意の値を設定し、ボタン押下時にその値をコンソールに出力したい

発生している問題・エラーメッセージ

buttonに直接値を設定する方法が分からず、getElementsByNameかgetElementByidを使って無理やり出来ないかと思ったのですがそもそもButton1をjavascript側で認識しておらず、上手くいきません...
そもそもjavascriptからbuttonに値を設定するのは無理なんでしょうか？
もし方法がお分かりになればご教示願います。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta  charset=utf-8"/>   
<title></title>
<script type="text/javascript">        
    {
        window.onload = function () 
        {
            document.getElementsByName('Button1').value = "1";
        }
        function btn_click(id_value) 
        {
            console.log(id_value);
        }
    }

</script>
</head>
<body>
    <div>
        <input type="button" name ="Button1"  value="" onclick ="btn_click(this.value)" />
    </div>      
</body>
</html>

ここにより詳細な情報を記載してください。

maisumakun

2020/01/22 13:08

「<%= Button1.ClientID %>」という、標準的なHTMLに現れない記法がありますが、どのような環境で実行していますか？

m.ts10806

2020/01/22 13:12

コードはマークダウンのcode機能を利用してご提示ください。

koaradosu

2020/01/22 13:55

maisumakunさん visual studio2019で空の空のプロジェクトを立ち上げてhtmlのみ作成しております m.ts10806さんご指摘ありがとうございます、修正いたしました。

m.ts10806

2020/01/22 14:06

言語とかフレームワークの話と思います　＜どのような環境

行動規範の内容に同意します

回答3件

getElementsByNameという名前のとおり、このメソッドは複数ありうることが前提となっていますので、返り値はHTMLCollectionという配列のようなものを返します。直接document.getElementsByName('Button1').value =のような設定はできません。

ちょうど1個だとわかっているのであれば、document.getElementsByName('Button1')[0].value = "1";とすればいいかと思います。

投稿2020/01/22 14:26

maisumakun

総合スコア145183

koaradosu

2020/01/22 14:55

maisumakunさん各括弧構文を使わないとそもそもアクセス出来なかったのですね。勉強になります、ありがとうございます。

行動規範の内容に同意します

こんにちは
以下のように、"1" を代入する行の.value の直前に [0] を挿入してみるといかがでしょう？

修正前

javascript
1document.getElementsByName('Button1').value = "1";

修正後

javascript
1document.getElementsByName('Button1')[0].value = "1";

動作確認用CodePen: https://codepen.io/jun68ykt/pen/GRgPazz?editors=1011

追記

[0] を使わないで済ませるには、要素１個だけを返す

といったメソッドを使えばよいです。以下は querySelector を使用したサンプルです。

動作確認用CodePen: https://codepen.io/jun68ykt/pen/MWYZMov?editors=1011

投稿2020/01/22 14:28

編集2020/01/22 14:51

jun68ykt

総合スコア9058

koaradosu

2020/01/22 14:59 編集

jun68yktさん codepenの記載のように修正したところ、無事にデバック出来ました！ codepenの存在を知れた事もありがたいです。ありがとうございます。

jun68ykt

2020/01/22 14:53

どういたしまして > 無事にデバック出来ました！とのことでよかったです???? 要素を１個だけ取得したい場合に使うとよいメソッドを追記しましたので、そちらのほうの使用も検討してみるとよいかと思います。

行動規範の内容に同意します

ベストアンサー

getElement**"s"**ByName という名前が示す通り、返ってくる情報はHTMLコレクションです。
Document.getElementsByName()
要は複数の要素が配列として返ってくると思ってください。
なので、
document.getElementsByName('Button1')[0].value = "1";
のようにすれば良いです。

なぜ0で取得できるかは下記で確認してみると分かります。
console.log(document.getElementsByName('Button1'));
これに限らず、「思った通りに要素が操作できない」ときは「そもそも要素がどのように取得されているか」を使いたい場所の直前で確認するように癖づけると今回のような問題も未然に防げます。

あと、getElementById()から取得できるのは単体の要素なので[]などで番号指定しなくてもできると思います。（もちろんIDが振られていてそのIDがちゃんと指定されている前提）

投稿2020/01/22 14:25

編集2020/01/22 14:31

m.ts10806

総合スコア80850