HTMLにJSONデータを埋め込みたいです。
PythonとDjangoとHTMLとJSでWEBサイトを作っています。{{ form }}のドリルダウンをいじると背景・h1・pの色が変わるしくみになっています。
index.html に
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> </head> <body> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> color_array = { for (var i=0 ; i<=colors.length ; i++){ colors["name"] : { "background-color" : colors["background_color"], "h1" : colors["h1_color"] , "p" : colors["p_color"] , }, } }; function change_color(){ color_id = $("#id_color").val(); color_object = color_array[color_id]; $("body").css("background-color", color_object["background-color"]); $("h1").css("color", color_object["h1"]); $("p").css("color", color_object["p"]); } $( '#id_color' ).change( function () { change_color(); }); change_color(); var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(color) } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({}) </script> </body> </html>
と書いています。
var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(color) } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({})
と書いたcolors変数にJSONの結果
[ { "name": "white", "background_color": "#FFFFFF", "h1_color": "#000080", "p_color": "#0000FF", "task_name": "white" }, { "name": "green", "background_color": "#00FF00", "h1_color": "#00FFFF", "p_color": "#FFFF00", "task_name": "green" }, { "name": "pink", "background_color": "#FF00FF", "h1_color": "#FFFFFF", "p_color": "#000000", "task_name": "pink" } ]
が入っています。このJSON結果の"background_color"&"h1_color"&"p_color"を
"background-color" : colors["background_color"], "h1" : colors["h1_color"] , "p" : colors["p_color"] ,
にそれぞれ入れたいです。しかしこのように書いたコードを実行してドリルダウンを動かしても色が変わりません。おそらくJSON結果が上手く入っていないからだと思いますが。。。
どう直せば良いのでしょうか?
今のindex.htmlは
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> </head> <body> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> <!--color_array = {--> <!--for (var i=0 ; i<=colors.length ; i++){--> <!--colors["name"] : {--> <!--"background-color" : colors["background_color"],--> <!--"h1" : colors["h1_color"] ,--> <!--"p" : colors["p_color"] ,--> <!--},--> <!--}--> <!--};--> var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(color) } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({}) color_array = {} for (var i=0 ; i<=colors.length ; i++){ color_array[i] = { "background-color" : colors[i]["background_color"], "h1" : colors[i]["h1_color"] , "p" : colors[i]["p_color"] , }; } function change_color(){ color_id = $("#id_color").val(); color_object = color_array[color_id]; $("body").css("background-color", color_object["background-color"]); $("h1").css("color", color_object["h1"]); $("p").css("color", color_object["p"]); } $( '#id_color' ).change( function () { change_color(); }); change_color(); </script> </body> </html>
のようになっています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/09/03 10:39
2017/09/03 12:31
退会済みユーザー
2017/09/03 12:36
退会済みユーザー
2017/09/03 12:37
2017/09/03 13:08 編集
退会済みユーザー
2017/09/03 13:16
退会済みユーザー
2017/09/03 13:16
2017/09/03 13:26
2017/09/03 13:32 編集