

このような感じで複数のテキストボックスに入力した値を別の複数のテキストボックスに代入することは可能でしょうか。

[code]

    var textForm1 = document.getElementById("textForm1").value;
    
    var tf1 = document.getElementById("tf1");
    tf1.value = textForm1;
    
[/code]


CC BY-SA 4.0
2023-05-05T21:55:26.090
94759
2023-05-09T14:40:13.497
2023-05-05T23:23:07.823
3060
58181
question
javascript html
テキストボックスに入力した値を別のテキストボックスに代入


一応これで行けるみたいですが、なんで一旦変数に代入すると動かなくなるのかはよくわからないです。

[code]

        var textForm1=document.getElementById("textForm1").value;
        var tf1=document.getElementById("tf1").value=textForm1;
    
[/code]


CC BY-SA 4.0
2023-05-05T23:16:55.723
94761
2023-05-05T23:16:55.723
18637
94759
answer


> このような感じで複数のテキストボックスに入力した値を別の複数のテキストボックスに代入することは可能でしょうか。

上のコメントにも書きましたが、可能です。

できなかったと言ってる人がいるので証拠を。

以下のコードで、

[code]

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript">
            window.addEventListener('DOMContentLoaded', () => {
                var textForm1 = document.getElementById("textForm1").value;
    
                var tf1 = document.getElementById("tf1");
                tf1.value = textForm1;
            });
        </script>
    </head>
    <body>
        <input id="textForm1" type="text" value="textForm1 の value"/>
        ⇒
        <input id="tf1" type="text" />
    </body>
    </html>
    
[/code]

結果は以下の通りとなります。

[![画像の説明をここに入力](https://i.stack.imgur.com/6CXzP.jpg)](https://i.stack.imgur.com/6CXzP.jpg)

できなかったとすると、タイミングの問題では？（JavaScript のコードが動く時は input type="text" 要素の DOM
がまだ生成されてないとか）


CC BY-SA 4.0
2023-05-06T01:10:15.023
94762
2023-05-06T04:24:02.627
2023-05-06T04:24:02.627
51338
51338
94759
answer


# 回答ではありません

多分質問にはHTML全体を貼った方がいいですよ。  
以下は代入できない例です。  
質問編集のご参考までに。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
      <meta charset="utf-8">
      <script>
        var textForm1 = document.getElementById("textForm1").value;
        var tf1 = document.getElementById("tf1");
        tf1.value = textForm1;
      </script>
    </head>
    
    <body>
      <form>
        textForm1:<input id="textForm1" type="text" value="ほげ">
        tf1: <input id="tf1" type="text">
      </form>
    </body>
    
    </html>
[/code]


CC BY-SA 4.0
2023-05-06T03:46:20.223
94764
2023-05-06T03:46:20.223
54957
94759
answer


何を求めているのか謎なので、何を答えるべきかわかりませんね。`type="module"`と書くのも一つの答えになりますでしょうか。

[code]

    <script type="module">
      var textForm1 = document.getElementById("textForm1").value;
      var tf1 = document.getElementById("tf1");
      tf1.value = textForm1;
    </script>
    
    <input id="textForm1" type="text" value="textForm1 の value">
    ⇒
    <input id="tf1" type="text">
[/code]


CC BY-SA 4.0
2023-05-06T04:26:25.823
94765
2023-05-06T04:26:25.823
4236
94759
answer


index.htmlとmain.jsを同じフォルダに置き、index.htmlをクリックして開きます。  
インプットボックスの01に文字列を入力するか変更し、Enterキーを押すかマウスでどこかをクリックすると、同じ文字列が02と03にもコピーされます。

[code]

    <!-- index.html -->
    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <meta http-equiv='X-UA-Compatible' content='IE=edge'>
      <meta name='viewport' content='width=device-width, initial-scale=1.0'>
      <script src='https://code.jquery.com/jquery-3.3.1.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'></script>
      <script src='./main.js'></script>
      <title>Text copy</title>
    </head>
    <body>
      <label for='01'>01</label>
      <input type='text' id='01'><br>
      <label for='02'>02</label>
      <input type='text' id='02'><br>
      <label for='03'>03</label>
      <input type='text' id='03'><br>
    </body>
    </html>
    
[/code]

[code]

    // main.js
    'use strict';
    
    $(() => {
      $('#01').on('change', () => {
        $('#02').val($('#01').val());
        $('#03').val($('#01').val());
      });
    });
    
[/code]


CC BY-SA 4.0
2023-05-09T14:02:14.580
94792
2023-05-09T14:40:13.497
2023-05-09T14:40:13.497
57387
57387
94759
answer