【JavaScript】クリックパワーを溜めろ！（コード付き）

2022年8月14日2023年5月6日

ひたすらボタンをクリックしてパワーを溜めるだけのアプリです。

日々の鬱憤を思う存分マウスにぶつけろ！！

保存ボタンを押すと現在のパワーが保存され、次回このページに来た際に続きからプレイ(？)できます。

このページはローカルストレージ機能を利用しています。
ローカルストレージ機能がOFFの場合は保存されません。

ソースコード

カスタムHTMLに書いているコードは以下です。

<button id="button" onclick="buttonClick()" disabled="true" style="font-weight: bold;height:100px;font-size:large;padding: 10px 20px 10px 20px;">クリックパワーを溜めろ！</button>
<br>
<input type="text" value="0" id="count" readonly="">
<br><br>
<button id="save" onclick="save()" disabled="true" style="padding:10px">保存</button>

<script>
window.onload = function(){
  count = localStorage.getItem('count');
  if(!count){
    count = 0;
  }
  var elm = document.getElementById("count");
  elm.value = count;

  var btn = document.getElementById("button");
  console.log(btn);
  btn.disabled = false;
  var save = document.getElementById("save");
  save.disabled = false;
}
function save(event){
  var elm = document.getElementById("count");
  count = parseInt(elm.value);

  localStorage.setItem('count', count)
  alert("保存しました。");
}
function buttonClick(event){
  var elm = document.getElementById("count");
  count = parseInt(elm.value);
  if (!count){
    count = 0
  }
  count += 1;
  elm.value = count;
}
</script>