buttonをクリックしたら2秒間だけメッセージを表示して消したい
hello
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <head> <style> .bg_pink { background-color: pink; color: white; } </style> </head> <body> <div id="main">hello</div><br> <button id="bt">button</button> <script> var milisec = 2000; var main = document.getElementById("main"); var bt = document.getElementById("bt"); bt.onclick = btClicked; function btClicked(){ showMessage(); setTimeout('removeMessage()', milisec); } function showMessage(){ main.classList.add("bg_pink"); main.textContent = "2秒だけ表示するメッセージ"; } function removeMessage(){ main.classList.remove("bg_pink"); main.textContent = "hello"; } </script> </body> </html> |
意訳.bg_pinkのスタイル 背景色 文字色 idがmainのdiv要素 idがbtのbutton要素 指定ミリ秒 idがmainの要素を取得する idがbtの要素を取得する btの要素がクリックされたら btClicked を実行する この機能がやること showMessage() を実行する milisec秒後に removeMessage() を実行する この機能がやること mainのclassに "bg_pink" を追加する mainに表示するメッセージ この機能がやること mainのclassから "bg_pink" を削除する mainに表示するメッセージ |
参考
setTimeout
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout
element.classList
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
setTimeout
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout
element.classList
https://developer.mozilla.org/ja/docs/Web/API/Element/classList