こういう機能を作る
ボタンをクリックすると 対象の要素 の表示状態(class名)が変わる
対象の要素
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<style>
.display_block {
display: block;
}
.display_inline {
display: inline;
}
.display_none {
display: none;
}
</style>
<body>
<div id="div1">対象の要素</div>
<button id="bt_block">block 表示</button>
<button id="bt_inline">inline 表示</button>
<button id="bt_none">none 非表示</button>
<script>
document.getElementById("bt_block").onclick = bt_block_clicked;
document.getElementById("bt_inline").onclick = bt_inline_clicked;
document.getElementById("bt_none").onclick = bt_none_clicked;
var div = document.getElementById("div1");
function bt_block_clicked() {
div.className = "display_block";
}
function bt_inline_clicked() {
div.className = "display_inline";
}
function bt_none_clicked() {
div.className = "display_none";
}
</script>
</body>
</html>
|
意訳これはHTML5文書です 前後に改行をつけて表示 前後に改行なしで表示 非表示 divを置く ボタンを置く（id は bt_block） ボタンを置く（id は bt_inline） ボタンを置く（id は bt_none） idがbt_blockの要素をクリックしたらbt_block_clickedを実行する idがbt_inlineの要素をクリックしたらbt_inline_clickedを実行する idがbt_noneの要素をクリックしたらbt_none_clickedを実行する idがdiv1の要素を取得する この機能がやること idがdiv1のクラス名をdisplay_blockにする この機能がやること idがdiv1のクラス名をdisplay_inlineにする この機能がやること idがdiv1のクラス名をdisplay_noneにする |