【GAS_Webアプリ⑤】java-scriptでかけ算をする

【GAS_Webアプリ①】java-scriptを動かす
コード
サンプル

【GAS_Webアプリ①】java-scriptを動かす

<スポンサーリンク>

今回は、GASのウェブアプリ上で、javascriptを用いて、かけ算をしていきたいと思います。

サンプルは下記のとおりです。

商品と、個数を選択し、計算ボタンを押すことで計算がかけられます。

コード

コード.js

まずは、webアプリを起動するためのおまじないです。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次は、htmlです。

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
></script>
<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。

ボディは、
・商品の選択項目、個数の選択と
・結果の表示欄
を作成しています。

<!--/*%_skip_start_%*/-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Get list val</title>
	<script
	  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
	></script>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
　  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<!--/*%_skip_end_%*/-->
<div>
	商品
	<select id="item">
		<option value="100" selected>鉛筆 (100円)</option>
		<option value="200">シャーペン (200円)</option>
		<option value="500">ノートセット (500円)</option>
	</select>
	個数
	<select id="num">
		<option value="1" selected>1個</option>
		<option value="2">2個</option>
		<option value="3">3個</option>
	</select>
	<input type="button" id="calcButton" value="計算">
</div>
<div class="viewarea">
	単価「<span id="itemSel"></span>」円、
	個数「<span id="numSel"></span>」個で、
	合計「<span id="result"></span>」円。
</div>
<!--/*%_skip_start_%*/-->
</body>
</html>
<!--/*%_skip_end_%*/-->

js1.html

javascriptは下記の通り、

・リストの値を取得
・値を入れ込む
・かけ算をする
・切り捨て
・結果を表示

としております。

<!DOCTYPE html>

<script>

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// ［計算］ボタンを押した時の処理を設定
	$("#calcButton").click(function() {
		// リストの値を取得
		var itemValue = $("#item option:selected").val();
		var numValue = $("#num option:selected").val();

		// リストの値を表示
		$("#itemSel").text(itemValue);
		$("#numSel").text(numValue);

		// 計算（掛け算）を行う
		var result = itemValue * numValue;

		// 切り捨て
		result = Math.floor(result);

		// 計算結果を表示
		$("#result").text(result);
	});

	// 初回表示用にプログラムからクリック
	$("#calcButton").click();
});

//ここに記述↑↑↑

</script>

CSS

cssは下記のとおりです。色などは自由に変更ください。

<style>

div.viewarea {
	background: #ffa;
	border: solid 1px #aa6;
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}

textarea {
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}
</style>

出力結果

出力結果は下記のとおりです。

サンプル

サンプルを置いておきますので、コピーしてお使いください。

サンプルをコピー

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。