このブログ内でデモを作ろうとしたけれど、うまく動かなかったので画像で。
動きがないとわかりにくいけれどこういう感じです。
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<input type="text" list="colors" id="color">
<datalist id="colors">
<option value="blue">
<option value="green">
</datalist>
<form id="radios">
<label><input type="radio" name="radio1" id="blue">blue</label><br>
<label><input type="radio" name="radio1" id="green">green</label>
</form>
<script>
document.getElementById("color").onchange = selectRadio;
function selectRadio() {
var color = document.getElementById("color").value;
var radios = document.getElementById("radios");
var labels = radios.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++) {
if(labels[i].textContent === color) {
labels[i].click();
}
}
}
</script>
</body>
</html>
|
意訳テキストボックス テキストボックスにサジェストするリスト blue green formを配置する blueのラジオボタン greenのラジオボタン ここからJavaScript idが"color"の値が変わったらselectRadioを実行する この機能がやること idが"color"の値を取得する idが"radios"の要素を取得して その中のlabel要素を取得する label要素の数だけ繰り返す label要素のテキストがcolorと同じなら label要素をクリックする |
