こういうHTML要素があって
<label id="HARE"></label>
<label id="AME"></label>
<label id="YUKI"></label>
それらの要素を取得して
var hare = document.getElementById("HARE");
var ame = document.getElementById("AME");
var yuki = document.getElementById("YUKI");
こういうオブジェクト作って
var obj = {
"hare": hare,
"ame": ame,
"yuki": yuki
}
別で作ったこういうオブジェクトの値を
HTML要素のid, value, name, テキストに設定したい
var data = {
"hare": ["はれ", "ハレ", "晴れ"],
"ame": ["あめ", "アメ", "雨"],
"yuki": ["ゆき", "ユキ", "雪"],
}
このように
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<label id="HARE"></label>
<label id="AME"></label>
<label id="YUKI"></label>
<script>
document.addEventListener('DOMContentLoaded', set_data);
var data = {
"hare": ["はれ", "ハレ", "晴れ"],
"ame": ["あめ", "アメ", "雨"],
"yuki": ["ゆき", "ユキ", "雪"],
}
function set_data() {
var hare = document.getElementById("HARE");
var ame = document.getElementById("AME");
var yuki = document.getElementById("YUKI");
var obj = {
"hare": hare,
"ame": ame,
"yuki": yuki
}
for (var i = 0; i < Object.keys(obj).length; i++) {
var key = Object.keys(obj)[i];
obj[key].setAttribute("id", key);
obj[key].setAttribute("value", data[key][0]);
obj[key].setAttribute("name", data[key][1]);
obj[key].textContent = data[key][2];
}
}
</script>
</body>
</html>
|
意訳これはHTML5文書です ラベルを置く → id は HARE ラベルを置く → id は AME ラベルを置く → id は YUKI HTMLドキュメントが読み込まれたらset_dataを実行する dataオブジェクトを用意する この機能がやること id が hare の要素を取得して id が ame の要素を取得して id が yuki の要素を取得して dateオブジェクトと同じ key にして取得した要素を値に入れる objのkeyの数だけ以下を繰り返す objのkeyを一つずつ取得して → i が 0 の場合は hare それを要素のidに設定し dataオブジェクトからkeyに一致する値（例では配列）を取得して0番目の値を要素のvalueに設定して 同じようにnameには1番目の値を テキストには2番目の値を設定する |
HTML要素をオブジェクトに入れずに設定する場合
これを別の書き方で実現できないかと思って試したのが上記のindex.htmlです
index.html<!DOCTYPE html>
<html>
<body>
<label id="HARE"></label>
<label id="AME"></label>
<label id="YUKI"></label>
<script>
document.addEventListener('DOMContentLoaded', set_data);
var data = {
"hare": ["はれ", "ハレ", "晴れ"],
"ame": ["あめ", "アメ", "雨"],
"yuki": ["ゆき", "ユキ", "雪"],
}
function set_data() {
var hare = document.getElementById("HARE");
var ame = document.getElementById("AME");
var yuki = document.getElementById("YUKI");
hare.setAttribute("id", "hare");
hare.setAttribute("value", data["hare"][0]);
hare.setAttribute("name", data["hare"][1]);
hare.textContent = data["hare"][2];
ame.setAttribute("id", "ame");
ame.setAttribute("value", data["ame"][0]);
ame.setAttribute("name", data["ame"][1]);
ame.textContent = data["ame"][2];
yuki.setAttribute("id", "yuki");
yuki.setAttribute("value", data["yuki"][0]);
yuki.setAttribute("name", data["yuki"][1]);
yuki.textContent = data["yuki"][2];
}
</script>
</body>
</html>
|
