#：現在やっていること
html上で，ボタンクリックすると，横並びに数字との3つのテキストエリアが追加されるような
アプリを作っています．

作成中のコード：

以下は今作成中のhtmlのコードです．

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
//カウンタの初期値を設定
var countUpValue = 1;


$(function() {

  $('button#add').click(function(){

  countUpValue++;


  var tr_form = ''+

  '<tr>' +

    '<td>X</textarea></td>' +

    '<td><textarea id="new_item" rows="1"></textarea></td>' +
    '<td><textarea id="new_positive" rows="1"></textarea></td>' +
    '<td><textarea id="new_negative" rows="1"></textarea></td>' +
    '<td><input type="submit" name="send" value="グラフに書き込み"></td>'

  '</tr>';
　
  $(tr_form).appendTo($('table > tbody'));
  document.getElementById(arg_id).value = "SYNCER" ;



});


});

</script>



  <form name="form1">
  <table>
  <thead>
    <tr>
      <th>項目のid</th>
      <th>項目の内容</th>
      <th>ポジティブな関係の対象</th>
      <th>ネガティブな関係の対象</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>

      <td><textarea id="item_1" name=text_1[]" rows="1"></textarea></td>

      <td><textarea id="possitive_1" name="text_2[]" rows="1"></textarea></td>

      <td><textarea id="negative_1" name=text_3[]" rows="1"></textarea></td>

      <td><input type="submit" name="send" value="グラフに書き込み"></td>

    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td ><button id="add" type="button">項目を追加</button></td>
    </tr>
  </tfoot>
 </table>

 </form>

</body>
</html>

質問したいことと試したこと：

今回質問したいことは，横並びに追加される要素のうち，数字についてです．
添付したコードでは，ボタンクリックされて追加される数字が常にXとなっていますが，
作りたいのは，数字が順々に増えていくものです（例えば，ボタンクリックされて追加された要素が二段目なら2）. javascript上でカウンターを定義したのですが，その値をどうやってhtml上に表示したらいいかがわかりません．

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

回答1件

ベストアンサー

テンプレートリテラを使うとスマートに簡潔に書けます。
カウンターはcountUpValue++で行っているので、そこに格納されている値をドキュメント内に組み込むだけだと思います。
参照

Javascript
1var tr_form = `<tr>
2  <td>${countUpValue}</td>
3    <td><textarea id="new_item"     name="text_${countUpValue}[]" rows="1"></textarea></td>
4    <td><textarea id="new_positive" name="text_${countUpValue}[]" rows="1"></textarea></td>
5    <td><textarea id="new_negative" name="text_${countUpValue}[]" rows="1"></textarea></td>
6    <td><input type="submit" name="send" value="グラフに書き込み"></td>
7  </tr>`;

###気になった点
ダブルクォーテーションが抜けてます

HTML
1... name=text_1[]" ... <!-- 63行 -->
2... name=text_3[]" ... <!-- 67行 -->

投稿2020/09/17 01:57

Create_NAYU

総合スコア101

13K

2020/09/17 03:32

わかりやすい回答をしていただき、誠にありがとうございます．また，ダブルクォーテーションもご指摘していただき，ありがとうございます．大変助かりました．

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ボタンをクリックすると，javascriptで定義した変数htmlに表示させたい．

作成中のコード：

質問したいことと試したこと：

関連した質問