javascriptで、関数を使って重複する表現をよりシンプルに書きたい

実現したいこと
chart.jsを使い、ロードされた時点で指定の値を取得して円グラフを描画しつつ、
下の2つのボタンが押されたときも同じ処理をしてグラフを表示させる

現状
特にエラーがあるわけではないのですが、
全ての関数に同じコードを記載して無理やり動かしいている状況です。
同じ処理を関数でまとめたいのですが、まとめると読み込まれた時点で表示されなくなって
しまうなど、問題が発生してしまいます。

お知恵をお借りできますでしょうか。m(.. )m
何卒よろしくお願いいたします。

html
1 <div id="percent"></div>
2        <canvas id="ugCanvas"></canvas>
3        <div class="btn01">
4            <div id="btnng">う〜ん。。</div>
5            <div id="btnok">なるほど！</div>
6        </div>
7        <div class="sample">

javascript
1
2    <script>
3        $(function () {
4            var know;
5            know = Math.floor(Math.random() * 100) + 1;
6            var dontknow = 100 - know;
7            var percent = document.getElementById("percent");
8            percent.innerHTML = know + "%";
9            var doughnutData = [
10                {
11                    value: know,
12                    color: "#fbaa6e"
13				},
14                {
15                    value: dontknow,
16                    color: "#aaf2fb"
17				}
18			];
19            var myDoughnut = new Chart(document.getElementById("ugCanvas").getContext("2d")).Doughnut(doughnutData);
20        });
21        $("#btnok").on('click', function () {
22            var know;
23            know = Math.floor(Math.random() * 100) + 1;
24            var dontknow = 100 - know;
25            var percent = document.getElementById("percent");
26            percent.innerHTML = know + "%";
27            var doughnutData = [
28                {
29                    value: know,
30                    color: "#fbaa6e"
31				},
32                {
33                    value: dontknow,
34                    color: "#aaf2fb"
35				}
36			];
37            var myDoughnut = new Chart(document.getElementById("ugCanvas").getContext("2d")).Doughnut(doughnutData);
38        });
39        $("#btnng").on('click', function () {
40            var know;
41            know = Math.floor(Math.random() * 100) + 1;
42            var dontknow = 100 - know;
43            var percent = document.getElementById("percent");
44            percent.innerHTML = know + "%";
45            var doughnutData = [
46                {
47                    value: know,
48                    color: "#fbaa6e"
49				},
50                {
51                    value: dontknow,
52                    color: "#aaf2fb"
53				}
54			];
55            var myDoughnut = new Chart(document.getElementById("ugCanvas").getContext("2d")).Doughnut(doughnutData);
56        });
57    </script>
58

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

回答1件

ベストアンサー

html
1<script>
2	$(function () {
3		$("#btnok,#btnng").on('click', function () {
4			var know;
5			know = Math.floor(Math.random() * 100) + 1;
6			var dontknow = 100 - know;
7			var percent = document.getElementById("percent");
8			percent.innerHTML = know + "%";
9			var doughnutData = [
10				{
11					value: know,
12					color: "#fbaa6e"
13				},
14				{
15					value: dontknow,
16					color: "#aaf2fb"
17				}
18			];
19			var myDoughnut = new Chart(document.getElementById("ugCanvas").getContext("2d")).Doughnut(doughnutData);
20		}).click();
21	});
22</script>