jinja2でhtmlのボタンのvalueを動的に設定したい

前提・実現したいこと

Flaskを用いて、jinja2でhtmlに値を設定する際に、
htmlのボタンのvalueに動的に値を設定したい

発生している問題

htmlの一部抜粋です。
data = [1,2,3]としてpythonからrender_template関数で送っています。
表自体は、以下のように正しくでます。
＜表＞ーーーーーーーーーーーーーーーー
１列目　２列目　３列目　４列目
１　　　１　　　１　　ボタン
２　　　２　　　２　　ボタン
３　　　３　　　３　　ボタン
ーーーーーーーーーーーーーーーーーーー

修正ボタンのvalue値に、janja2で「i」に設定しているのですが、
全て、４列目のどのボタンを押しても、最初のiの値の１が表示されてしまいます。

実現したいことは、各行のボタンを押下すると、その行の値を出すようにしたいです。

    {% for i in data %}
    <tr>
    <td>{{ i }}</td>
    <td>{{ i }}</td>
    <td>{{ i }}</td>
    <td><button type="button" id="button" value="{{i}}" onclick="test()">ボタン</button></td>
    </tr>
    {% endfor %}

javascriptのonclick()のソースは以下です。

function test() {
    var a = document.getElementById("button").value
    alert(a)    
}

上記していますが、
実現したいことは、各行のボタンを押下すると、その行の値を出すようにしたいです。
疑問として、
１.上記のように動的にボタンのvalueの設定はできないのか?
２.他に各行のボタンを押下すると、その行の値を出す方法はあるか？

教えていただけると嬉しいです。

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

回答2件

ベストアンサー

ソース全文が提供されていないので、私がでっち上げたコードを提示します。
valueの値を取得したいとのことですが、行の値を表示する方がメインと思いましたので、そちらを実現するコードです。
table1行目のボタンを押すと[1]、2行目は[2]、3行目は[3]がalertおよびconsoleに表示されます。

ご覧の通り、rkgmpngnさんのコードとほぼ同じです。value="{{i}}"とすれば全く同じになります。

rkgmpngnさんのコードが期待通りに動作しないのは、quiquiさんの指摘にあるとおり、idが重複しているためです。
同じhtml内でidは複数存在してはいけません。idは必ずユニークにしてください。
idが重複したものをgetEelementByIDした場合、取得できる値はブラウザによると思いますが、rkgmpngnさんの環境では運良く最初の要素を取得できているんだと思います。

python
1# app.py
2from flask import Flask, render_template
3
4app = Flask(__name__)
5
6
7@app.route('/')
8def index():
9    data = [1, 2, 3]
10    return render_template('index.html', data=data)
11
12
13if __name__ == '__main__':
14    app.run()
15

html
1<!-- templates/index.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>Title</title>
7</head>
8<body>
9
10    <table border="1">
11        {% for i in data %}
12            <tbody>
13                <tr>
14                    <td>{{ i }}</td>
15                    <td>{{ i }}</td>
16                    <td>{{ i }}</td>
17                    <td><button type="button" onclick="test({{ i }})">ボタン</button></td>
18                </tr>
19            </tbody>
20        {% endfor %}
21    </table>
22    <script type="text/javascript">
23        function test(i){
24            console.log(i);
25            alert(i);
26        }
27    </script>
28</body>
29</html>

上記を実行すると出力されるhtml

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8
9    <table border="1">
10        
11            <tbody>
12                <tr>
13                    <td>1</td>
14                    <td>1</td>
15                    <td>1</td>
16                    <td><button type="button" onclick="test(1)">ボタン</button></td>
17                </tr>
18            </tbody>
19        
20            <tbody>
21                <tr>
22                    <td>2</td>
23                    <td>2</td>
24                    <td>2</td>
25                    <td><button type="button" onclick="test(2)">ボタン</button></td>
26                </tr>
27            </tbody>
28        
29            <tbody>
30                <tr>
31                    <td>3</td>
32                    <td>3</td>
33                    <td>3</td>
34                    <td><button type="button" onclick="test(3)">ボタン</button></td>
35                </tr>
36            </tbody>
37        
38    </table>
39    <script type="text/javascript">
40        function test(i){
41            console.log(i);
42            alert(i);
43        }
44    </script>
45</body>
46</html>

投稿2020/07/03 02:26

FiroProchainezo

総合スコア2401

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id

id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。

idが同一html内で重複していることをhtmlは許しません。
重複している時にブラウザがどう振る舞うべきかも（多分）決められているわけではなく、したがってdocument.getElementById("button")すると何を返ってくるか? は、たまたまあなたの使っているブラウザがそういう動作=最初の要素を返すにしているというだけです。

現状の動作の理由だけですが、ひとまず。

投稿2020/07/03 00:07