凄く初歩的なプログラムかもしれませんが、
行き詰まっています。。。

■やりたいこと
クリックするたびに、
カウントを0~5まで、ひとつずつ増やしていき、
5まできたらひとつずつ減らしたい。
それの繰り返し。

5までいったら、0に戻すのは出来たが、
逆順の方法がわからないので、
どなたか教えてください!!

kei344

2017/06/10 08:36

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

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

回答6件

ベストアンサー

以下のように行ってはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<button type="button" id="button1">クリック</button>
9<script>
10    var count = 0, addnum = 1;
11    document.getElementById("button1").addEventListener("click", function () {
12        this.textContent = count;
13        count = count + addnum;
14        addnum = (count >= 5 || count <= 0) ? (addnum = -1 * addnum) : addnum;
15    }, false);
16</script>
17</body>
18</html>

投稿2017/06/10 09:14

s8_chu

総合スコア14731

Z-TALBO

2017/06/10 09:19

質問した側じゃないんですが、、、参考になります！ｗ

shohei000

2017/06/11 04:07

自分の想像している組み立て方とは、違いシンプルで非常に勉強になりましたので、ベストアンサーにさせて頂きました！！ありがとうございます！

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

おもしろそうなので、考えてみました

初期値の設定ができて、そのあとはただ呼び出すだけで動作するバージョンです

javascript
1// Define functions
2upDownCycleNumber = function(cycleLength) {
3  // Setup function
4  // Create an array like:
5  // [0, 1, 2, 3, 4, 5, 4, 3, 2, 1]
6  createUpDownCyclesArray = function(cycleLength) {
7    // Create an array like:
8    // [0, 1, 2, 3, 4, 5]
9    incrementalArray =
10      Array.apply(null, Array(cycleLength + 1))
11           .map(function(_, i) { return i })
12
13    // Create an array like:
14    // [0, 1, 2, 3, 4, 5] => [4, 3, 2, 1]
15    decrementalArray =
16      (function(incrementalArray){
17        decrementalArray = incrementalArray.slice().reverse()
18        decrementalArray.shift()
19        decrementalArray.pop()
20
21        return decrementalArray
22      })(incrementalArray)
23
24    return incrementalArray.concat(decrementalArray)
25  }
26
27  self = this // for refer outer context of `this` from inner context
28
29  this.cycleValues = createUpDownCyclesArray(cycleLength)
30  this.index = 0
31
32  // Closure function
33  return function() {
34    return self.cycleValues[self.index++ % self.cycleValues.length]
35  }
36}
37
38cycleLength = 5
39cycleValues = new upDownCycleNumber(cycleLength)
40
41for(i = 0; i < 20; i++) {
42  console.log(cycleValues())
43}
44// =>
45// 0
46// 1
47// 2
48// 3
49// 4
50// 5
51// 4
52// 3
53// 2
54// 1
55// 0
56// 1
57// 2
58// 3
59// 4
60// 5
61// 4
62// 3
63// 2
64// 1

これをHTML と絡めて組み込むことができれば、期待する動作が得られるのではないでしょうか

何か参考になれば幸いです

Link

JavaScript | MDN

投稿2017/06/10 12:41

編集2017/06/11 01:53

gouf

総合スコア2321

ポイントは、「現在カウントアップ中かカウントダウン中か」という状態が増えたことです。
「カウントアップ中かカウントダウン中か」を覚えておく変数を用意すると整理しやすいと思います。

(function() {
'use strict';

var count = 0,
    countUp = true,
    btn = document.getElementById('button'),
    result = document.getElementById('result');

function onClick() {
  countUp = (function() {
    // countが5以上になったらカウントダウン状態に、
    // countが0以下になったらカウントアップ状態に切り替える。
    // それ以外の値(1~4)では、カウントの状態を変更しない。
    if(count >= 5) {
      return false;
    }
    if(count <= 0) {
      return true;
    }
    return countUp;
  })();
  // 現在カウントアップ中なら1プラス、カウントダウン中なら1マイナス
  count += countUp ? 1 : -1
  result.value = count;
}
btn.addEventListener('click', onClick);
})();

投稿2017/06/10 11:25

philomagi

総合スコア267

みなさまご回答ありがとうございます！
少し投げやり感がありすみません。。。
お知恵おお貸しして頂き本当に勉強になりました！
解答を参考に自分なりにも書いてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<button type="button" id="button1">クリック</button>
<script>
  $(function(){
  	var flg = true;
  	var count = 0;
  	function counter(){
  		console.log(count);
  		if(flg){
  			count++;
  			if(count >= 5){
  				flg = false;
  			}
  		}else{
  			count--;
  			if(count <= 0){
  				flg = true;
  			}
  		}
  	}
  	$('#button1').on("click",counter);
  });
</script>
</body>
</html>

投稿2017/06/11 04:05

shohei000

総合スコア13

philomagi

2017/06/11 04:30

老婆心でコメントすると、 "flg" という単純すぎる変数名は避けた方が良いです。後で見返した時、「flg === true の場合とは、どのような状態の表現なのか」が名前から推測できないので、ソースコードを追いかける必要が生じるからです。 flg で判定したい事柄を端的に表す名前をつけると、後々のメンテナンス性が向上するでしょう。ロジックの本質からは離れたテクニックレベルのお話ですが、参考までに。

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

すみません、これは間違いです。。。。

投稿2017/06/10 09:15

編集2017/06/10 09:18

Z-TALBO

総合スコア525

私も少しこの問題に興味があるので、静観しますｗｗ
初心者なので、こういうロジック考えるのがまだまだできておらず、、、

ちなみに、ボタンの文字を変えるのはアリですか？

Javascript
1<div id="result">0</div>
2	<div id="btn">UP</div>
3
4	<script>
5		(function() {
6			'use strict';
7			var btn = document.getElementById('btn');
8			var num = 0;
9			var result = document.getElementById('result');
10
11			btn.addEventListener('click', function() {
12				if(btn.innerHTML === 'UP') {
13					num++;
14					if(num >= 6) {
15						btn.innerHTML = 'DOWN';
16					}
17				}
18				if(btn.innerHTML === 'DOWN') {
19					num--;
20					if(num === 0) {
21						btn.innerHTML = 'UP';
22					}
23				}
24				result.innerHTML = num;
25			});	
26
27		})();
28	</script>