JavaScriptでinnerHTMLに動的に入力する

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

innerHTMLで動的に変化させたフォームに全て同じ値を入力したいのですが動作しません。

①は、一つのフォームに入力すると他のフォームへも同時に入力されるJavaScriptです。

②は初期表示のプルダウンを選択するとinnerHTMLで動的にテキストフォームを出現させるJavaScriptです。
この時、商品名１に値を入力したら商品名2〜５まで同じ内容を入力させたいのですが動作しません。イメージとしては①で作ったJavaScriptなのですが、innerHTMLにしたら動作しませんでした。

お手数お掛け致しますが、何卒ご教示下されば幸いです。

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

意図した動作が行われない

該当のソースコード


======
①

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="">
            <textarea name="" id="input1" cols="30" rows="10"></textarea>

            <textarea name="" id="input2" cols="30" rows="10"></textarea>
            <textarea name="" id="input3" cols="30" rows="10"></textarea>
            <textarea name="" id="input4" cols="30" rows="10"></textarea>
        </form>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#input1").on("keyup change", function () {
                    $("#input2,#input3,#input4").val($(this).val());
                });
                $("#input2").on("keyup change", function () {
                    $("#input1,#input3,#input4").val($(this).val());
                });
                $("#input3").on("keyup change", function () {
                    $("#input1,#input2,#input4").val($(this).val());
                });
                $("#input4").on("keyup change", function () {
                    $("#input1,#input2,#input3").val($(this).val());
                });
            });
        </script>
    </body>
</html>

======
②

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
<form name="enquete" method="post" enctype="multipart/form-data">
<dt>カテゴリーを選ぶ<dt>
    <dd>
    <select name="category" class="required" required id="Select1" onchange="selectboxChange();">
    <option value="">選択してください</option>
    <option value="選択肢１" >選択肢１</option>
    <option value="選択肢２" >選択肢２</option>
    <option value="選択肢３" >選択肢３</option>
    <option value="選択肢４" >選択肢４</option>
    <option value="選択肢５" >選択肢５</option>
    </select></dd>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script type="text/javascript" language="javascript">
    function selectboxChange() {
          target = document.getElementById("output");
    
          selindex = document.enquete.Select1.selectedIndex;
          switch (selindex) {
            case 1:
              target.innerHTML = 
              '<dt>商品名１<dt>'+
              '<dd><input type="text" name="name" id="name1" value="" required/><dd>';
            break;
            case 2:
              target.innerHTML = 
              '<dt>商品名２<dt>'+
              '<dd><input type="text" name="name"  id="name2" value="" required/><dd>';
                          break;
            case 3:
              target.innerHTML = 
              '<dt>商品名３<dt>'+
              '<dd><input type="text" name="name"  id="name3" value="" required/><dd>';
              break;
            case 4:
              target.innerHTML = 
              '<dt>商品名４<dt>'+
              '<dd><input type="text" name="name"  id="name4" value="" required/><dd>';
              break;
            case 5:
              target.innerHTML = 
              '<dt>商品名５<dt>'+
              '<dd><input type="text" name="name"  id="name5" value="" required/><dd>';
              break;
    
              default:
              target.innerHTML = '';
          }
        $(function () {
        $("#name1").on("keyup change", function () {
            $("#name2,#name3,#name4").val($(this).val());
        });
        $("#name2").on("keyup change", function () {
            $("#name1,#name3,#name4").val($(this).val());
        });
        $("#name3").on("keyup change", function () {
            $("#name1,#name2,#name4").val($(this).val());
        });
        $("#name4").on("keyup change", function () {
            $("#name1,#name2,#name3").val($(this).val());
        });
        });
    }
    
    </script>


    <div id="output"></div>
</form>
</body>
</html>

試したこと

JavaScriptの書く順番を変える、ソースコードの書き損じのチェックなど

補足情報（FW/ツールのバージョンなど）

ChromeとFirefoxで確認

yambejp

2021/04/01 13:04

(2)は意味がよくわかりません。選択肢を選ぶ→inputが出てくるまではわかりますが、１を入れたら２－５が同じ値というのが理解できません１を入れても２－５は存在しませんよね？

hina_hina

2021/04/01 13:09

> １を入れても２－５は存在しませんよね？ ①の例のように、同時に値を入力する事はinnerHTMLの場合は不可能なのでしょうか。

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

回答1件

ベストアンサー

(1)はこんな感じ

javascript
1$(function () {
2  $("textarea").on("input", function () {
3    $("textarea").not(this).val($(this).val());
4  });
5});

(2)は好意的に想像してこんな感じ

javascript
1$(function(){
2  var v="";
3  var list={
4    "選択肢１":{"product":"商品名１","id":"name1"},
5    "選択肢２":{"product":"商品名２","id":"name2"},
6    "選択肢３":{"product":"商品名３","id":"name3"},
7    "選択肢４":{"product":"商品名４","id":"name4"},
8    "選択肢５":{"product":"商品名５","id":"name5"},
9  };
10  $('#Select1').on('change',function(){
11    $('#output').empty().append(
12      $("<dt>").text(list[$(this).val()].product),
13      $("<dd>").append($('<input type="text" name="name" required>').attr('id',list[$(this).val()].id).val(v))
14      );
15  });
16  $(document).on('change','[name="name"]',function(){
17    v=$(this).val();
18  });
19});