変数の値によって処理を変えたい

数字のカウンターを作って、その数字が０のとき「あ」、１のとき「い」をlog表示させたいです。
しかし、現在はじめに「あ」が表示されたあとに、値を変えても表示されません。どのようにすればよいでしょうか？

html

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">

<head>
  <title>Test</title>
 <p id="disp_count">0</p>
 <input type="button" value="引く" id="btn_count_down" />
 <input type="button" value="足す" id="btn_count_up" />

</head>

<body>
<script>

</script>
</body>
</html>

JavaScript

// オブジェクトと変数の準備
var count_disp = document.getElementById('disp_count');
var count_up_btn = document.getElementById("btn_count_up");
var count_down_btn = document.getElementById("btn_count_down");
var count_value = 0;


// カウントアップボタンクリック処理
window.onload = function() {

count_up_btn.onclick = function (){
     count_value = count_value+1;
     count_disp.innerHTML = count_value;
}
// カウントダウンボタンクリック処理
count_down_btn.onclick = function (){
     count_value = count_value-1;
     count_disp.innerHTML = count_value;
}
}

(function() {
if(count_value == 0) {
    console.log("あ");
}

if(count_value == 1) {
    console.log("い");
}
}());

行動規範の内容に同意します

回答4件

clickイベントでカウント判定すればよいです。

<head>タグ内にボタンなど定義するのは変なのでやめたほうがいいかと。

js
1
2var cnt = function() {
3	if(count_value == 0) {
4	    console.log("あ");
5	}
6
7	if(count_value == 1) {
8	    console.log("い");
9	}
10};
11
12// カウントアップボタンクリック処理
13window.onload = function() {
14	cnt();
15	count_up_btn.onclick = function (){
16	     count_value = count_value+1;
17	     count_disp.innerHTML = count_value;
18	     cnt();
19	};
20	// カウントダウンボタンクリック処理
21	count_down_btn.onclick = function (){
22	     count_value = count_value-1;
23	     count_disp.innerHTML = count_value;
24	     cnt();
25	};
26};