javascript ボタンを押したとき加算される数字がたまに多くなるプログラム

###実現したいこと
javascriptでボタンをクリックしたときに、10～15回に1回の割合で加算される数字が増えるプログラムを作成したいです。先に、ランダムに数字が加算されるようにやってみようと思ったのですが、ランダムに加算されるプログラムとはやり方が違うのかなと思い質問させていただきました。現在は、100ずつ加算され画像がランダムで表示されるようになっています。もしよろしければ、ご教授お願いいたします。参考になるサイトや調べ方を教えていただければ幸いです。

###ソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>クリックアプリ</title>
</head>
<body>

  <p>家事をして<br><span id="Output">0</span>円<br>貯金しました</p>

  <img class="js-image-insertarea" src="">

  <input class="js-trigger-button" type="button" value="貯金する">

  <script type="text/javascript">
    ( function() {
      var Count = 0;
      
      var outputElement = document.getElementById("Output")
      var imageElement = document.querySelector('.js-image-insertarea')

      function CountUp() {
        outputElement.textContent = Count +=100;
      }

      function getImage() {

        var image = new Array("./image1.png","./image2.png","./image3.png");
        var randomNum = (Math.floor(Math.random() * 3) );

        imageElement.src = image[ randomNum ]
      }

      function onClickTriggerButton() {
        CountUp(); getImage();
      }

      document.querySelector('.js-trigger-button').addEventListener('click', onClickTriggerButton)
    })()
    </script>
</body>
</html>

###試したこと
調べてランダムに数字を表示する方法があったので、それでランダムに数字を加算できないかやってみましたができませんでした。

      function CountUp() {
        outputElement.textContent = Count +=100;
        var randnum = Math.floor( Math.random() * 100);
        document.getElementById("CountUp").innerHTML = randnum;
      }

     function CountUp() {
        outputElement.textContent = Count +="CountUp";
        var randnum = Math.floor( Math.random() * 100);
        document.getElementById("CountUp").innerHTML = randnum;
      }

function CountUp() {
        outputElement.textContent = Count +=("CountUp");
        var randnum = Math.floor( Math.random() * 100);
        document.getElementById("CountUp").innerHTML = randnum;
      }

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

回答1件

ベストアンサー

やりたいことの記述からして10～15回に一度100より大きい値を足せばいいことに対して難しく考えすぎてる感じがします。

確率をとりあえず15%として＆Countが現在の所持金としての変数のようなので

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/style.css">
6  <title>クリックアプリ</title>
7</head>
8<body>
9
10  <p>家事をして<br><span id="Output">0</span>円<br>貯金しました</p>
11
12  <img class="js-image-insertarea" src="">
13
14  <input class="js-trigger-button" type="button" value="貯金する">
15
16  <script type="text/javascript">
17    // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random
18    function getRandomInt(max) {
19      return Math.floor(Math.random() * Math.floor(max));
20    }
21
22    ( function() {
23      var Count = 0;
24      
25      var outputElement = document.getElementById("Output")
26      var imageElement = document.querySelector('.js-image-insertarea')
27
28      function CountUp() {
29        // 15%で多少増える
30        if(getRandomInt(100) < 15) {
31          Count += 50; // 増える値もランダムにしたかったらgetRandomIntを使いましょう
32        }
33        Count += 100;
34        outputElement.textContent = Count;
35      }
36
37      function getImage() {
38
39        var image = new Array("./image1.png","./image2.png","./image3.png");
40        var randomNum = (Math.floor(Math.random() * 3) );
41
42        imageElement.src = image[ randomNum ]
43      }
44
45      function onClickTriggerButton() {
46        CountUp(); getImage();
47      }
48
49      document.querySelector('.js-trigger-button').addEventListener('click', onClickTriggerButton)
50    })()
51    </script>
52</body>
53</html>