目的
更新ボタンを押したら、「A と、見せかけてB」の文字列がランダムに更新されるようなWebサーバをjavascriptを使って作成してみた際の備忘録です
コード
フォルダ構成
test/
index.html
sample.js
index.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script src="sample.js"></script>
</head>
<body>
<input type="button" value="更新" onclick="sample();">
<div id="area1">と、見せかけて </div>
</body>
</html>
sample.js
var data = ['りんご',
'みかん',
'いちご',
'パイナップル',
'ドラゴンフルーツ'];
/**
* 配列の値からランダムで1つ選択して返す
* @param arr arrayData (required) 選択する配列の内容
* @return str
*/
function choose_at_random(arrayData) {
var arrayIndex = Math.floor(Math.random() * arrayData.length);
return arrayData[arrayIndex];
}
function sample(){
var getData = choose_at_random(data);
var getData2 = choose_at_random(data);
var str = getData + "、と、見せかけて、" + getData2;
console.log(str);
//document.getElementById("area1").innerText = "変更しました";
document.getElementById("area1").innerText = str;
}
コマンドラインからWebサーバを起動
python3 -m http.server 8080 --cgi
テスト
ブラウザからindex.htmlにアクセス
http://0.0.0.0:8080
更新を押すたびに「と、見せかけて」の文字列が変わればOK
参考
[JavaScript] HTML内の文字を動的に変更する（innerText）
配列の値の中からランダムで選択する
【JavaScript入門】joinや+演算子で配列や文字列を連結・結合する
pythonでローカルwebサーバを立ち上げる