目的

更新ボタンを押したら、「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サーバを立ち上げる