簡単なカウントアプリを作ってみる。
株式会社パーソンリンクにエンジニア未経験入社の高島です。入社して2ヶ月が経ちました。
今後は、保守・運用業務がメインになっていくのですが、業務以外でインプットできる分野を増やそうと思いました。社内ではvue.jsを扱えるエンジニアが多数在籍しています。今後、自分も開発業務に参画した際に幅広く対応できるように、まずはjavascriptにて簡単なカウントアプリを作ってみました。
アップボタンを押すと数字が１ずつ増え、ダウンボタンを押すと数字が１つずつ減っていくという簡単なものです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper {
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>カウンターアプリ</h1>
<div id='counter'>0</div>
<button id='count-up'>アップ</button>
<button id='ten-up'>10アップ</button>
<button id='count-down'>ダウン</button>
<button id="ten-down">10ダウン</button>
</div>
<script>
let counter = document.getElementById('counter');
let up = document.getElementById('count-up');
let down = document.getElementById('count-down');
let tu = document.getElementById('ten-up');
let td = document.getElementById('ten-down');
count = 0;
up.addEventListener('click', function () {
count = count + 1;
counter.innerHTML = count;
});
tu.addEventListener('click', function () {
count = count + 10;
counter.innerHTML = count;
});
down.addEventListener('click', function () {
count = count - 1;
counter.innerHTML = count;
});
td.addEventListener('click', function () {
count = count - 10;
counter.innerHTML = count;
});
</script>
</body>
</html>
解説
wrapperクラス内に、id属性でcounter,count-up(ボタン),count-down(ボタン)を作成する。
counter,count-up,count-downをjavascriptで扱いやすくするため、
let counter = document.getElementById('counter');
let up = document.getElementById('count-up');
let down = document.getElementById('count-down');
と記述する。
document.getElementById('id名');
で、引数にhtmlで記述したid名を指定することによって、要素を取得することができる。
up.addEventListener('click', function () {
count = count + 1;
counter.innerHTML = count;
});
は、upという要素に対して、「クリック」というイベントが行われた時に、
countという要素に1をプラスする。
ただ1をプラスしていくだけだと画面上に表示されないので、
counter.innerHTML = count;
とすることによって、htmlのid属性で記述したcounter内に、countを代入することができる。つまり、画面上に1をプラスした結果を表示することができる。
対象要素.addEventListener(イベントの種類.function(){})
down.addEventListener(‘click’, function () {
count = count - 1;
counter.innerHTML = count;
});
これも、upの時と同じで、downという要素に対して、「クリック」というイベントが行われた時に、countという要素から1をマイナスする。
完成形はこのようになります。
