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

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

新規登録して質問してみよう
ただいま回答率
85.42%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

5087閲覧

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

rkgmpngn

総合スコア7

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/02 11:43

前提・実現したいこと

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

発生している問題

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

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

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

{% 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) }

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ソース全文が提供されていないので、私がでっち上げたコードを提示します。
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

総合スコア2402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

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

投稿2020/07/03 00:07

quickquip

総合スコア11133

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

quickquip

2020/07/03 00:10 編集

書き出されたhtmlとjavascriptを引用して質問し直した方が早いかな、と思いました。質問の内容とタイトルが悪くて、よい解決法を答えられる人に読んでもらえてない気がします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問