JSで作成した2つの機能を表示させたい

前提・実現したいこと

前提として現在別々に機能を作成しており、１つ目はカレンダー機能、２つ目はCanvasを利用した画像に文字を重ねるという機能の２つを作成しています。
機能自体はどちらも完成はしている状態です。

実現したいこととしては、先ほど説明した２つの機能を表示できるようにしたいと考えています。
イメージとしては、画面を半分に分けて片方にはカレンダー機能（日付をクリックすることで日付を取得できる）を、もう片方にはCanvasの機能を表示させたいといった形になります。

参考にしたサイト
◆カレンダー機能
参考サイト
◆Canvas機能
参考サイト

発生している問題

発生している問題としては、組み合わせたときにどちらか片方しか表示されないということです。
現時点ではカレンダー機能しか表示されておらず、Canvasに表示されるはずの画像が表示されていない状態で、
カレンダー機能に該当するJSを消すとCanvasの機能が正常に動くようになります。

該当のソースコード

Canvas機能

java
1<body onload="loadImage('preview');">
2<p><canvas id="preview"></canvas></p>
3<p>
4<input type="text" id="canvas_text" value="[任意の値]">
5<button onclick="drawText('preview', 'canvas_text');">文字を入れる</button>
6</p>
7</body>

Javascript
1function loadImage(id)
2{
3	//画像を読み込んでImageオブジェクトを作成する
4	var image = new Image();
5	image.src = '[画像のパス]';
6	image.onload = (function () {
7		//画像ロードが完了してからキャンバスの準備をする
8		var canvas = document.getElementById(id);
9		var ctx = canvas.getContext('2d');
10		//キャンバスのサイズを画像サイズに合わせる
11		canvas.width = image.width;
12		canvas.height = image.height;
13		//キャンバスに画像を描画（開始位置0,0）
14		ctx.drawImage(image, 0, 0);
15	});
16}
17//キャンバスに文字を描く
18function drawText(canvas_id, text_id)
19{
20	var canvas = document.getElementById(canvas_id);
21	var ctx = canvas.getContext('2d');
22	var text = document.getElementById(text_id);
23	//文字のスタイルを指定
24	ctx.font = '18px serif';
25	ctx.fillStyle = '#ff0000';
26	//文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
27	ctx.textBaseline = 'center';
28	ctx.textAlign = 'center';
29	//座標を指定して文字を描く（座標は画像の中心に）
30	var x = (canvas.width / 2);
31	var y = (canvas.height / 1.7);
32	ctx.fillText(text.value, x, y);
33}

カレンダー機能

java
1<div class="main users-new">
2	<div class="container">
3	<font size="5">
4	<div id="calendar"></div>
5	</font>
6	</div>
7	</div>
8<input class="float-center text-danger" type="text"
9style="border: solid 0px; outline: none;" onselect="click_date" readonly>

javascript
1		window.onload = function() {
2			// 現在の年月の取得
3			var current = new Date();
4			var year = current.getFullYear();
5			var month = current.getMonth() + 1;
6
7			// カレンダーの表示
8			var wrapper = document.getElementById('calendar');
9			add_calendar(wrapper, year, month);
10		}
11
12		/** e.target.innerText = 日付 */
13		function handler(e) {
14			if (e.target.innerText === "")
15				return;
16			const yearmonth = document.querySelector(".calendar-header__title").innerText;
17
18			if(e.target.innerText < 10){
19				document.querySelector("input").value = yearmonth + '.' + '0'
20				+ e.target.innerText;
21			}else{
22				document.querySelector("input").value = yearmonth + '.'
23				+ e.target.innerText;
24			}
25
26		}
27		/**
28		 * 指定した年月のカレンダーを表示する
29		 * @param {object} wrapper - カレンダーを追加する親要素
30		 * @param {number} year    - 年の指定
31		 * @param {number} month   - 月の指定
32		 */
33		function add_calendar(wrapper, year, month) {
34			// 現在カレンダーが追加されている場合は一旦削除する
35			wrapper.textContent = null;
36
37			// カレンダーに表示する内容を取得
38			var headData = generate_calendar_header(wrapper, year, month);
39			var bodyData = generate_month_calendar(year, month);
40
41			// カレンダーの要素を追加
42			wrapper.appendChild(headData);
43			wrapper.appendChild(bodyData);
44			document.querySelectorAll("td").forEach(function(target) {
45				// 引数targetにはdiv要素が1つずつ渡されている
46				target.addEventListener('click', handler);
47			});
48		}
49
50
51		/**
52		 * 指定した年月のカレンダーのヘッダー要素を生成して返す
53		 * @param {object} wrapper - カレンダーを追加する親要素
54		 * @param {number} year    - 年の指定
55		 * @param {number} month   - 月の指定
56		 */
57		function generate_calendar_header(wrapper, year, month) {
58			// 前月と翌月を取得
59			var nextMonth = new Date(year, (month - 1));
60			nextMonth.setMonth(nextMonth.getMonth() + 1);
61			var prevMonth = new Date(year, (month - 1));
62			prevMonth.setMonth(prevMonth.getMonth() - 1);
63
64			// ヘッダー要素
65			var cHeader = document.createElement('div');
66			cHeader.className = 'calendar-header';
67
68			// 見出しの追加
69			var cTitle = document.createElement('div');
70			cTitle.className = 'calendar-header__title';
71
72			if(month < 10){
73				var cTitleText = document.createTextNode(year + '.' + '0' + month);
74			}else{
75				var cTitleText = document.createTextNode(year + '.' + month);
76			}
77
78
79			cTitle.appendChild(cTitleText);
80			cHeader.appendChild(cTitle).style.fontSize = "40px";
81
82			// 前月ボタンの追加
83			var cPrev = document.createElement('button');
84			cPrev.className = 'calendar-header__prev';
85			var cPrevText = document.createTextNode('prev');
86			cPrev.appendChild(cPrevText);
87
88			// 前月ボタンをクリックした時のイベント設定
89			cPrev.addEventListener('click', function() {
90				add_calendar(wrapper, prevMonth.getFullYear(), (prevMonth
91						.getMonth() + 1));
92			}, false);
93			cHeader.appendChild(cPrev).style.backgroundColor = "black";
94			cHeader.appendChild(cPrev).style.color = 'white';
95
96			// 翌月ボタンの追加
97			var cNext = document.createElement('button');
98			cNext.className = 'calendar-header__next';
99			var cNextText = document.createTextNode('next');
100			cNext.appendChild(cNextText);
101
102			// 翌月ボタンをクリックした時のイベント設定
103			cNext.addEventListener('click', function() {
104				add_calendar(wrapper, nextMonth.getFullYear(), (nextMonth
105						.getMonth() + 1));
106			}, false);
107			cHeader.appendChild(cNext).style.backgroundColor = "white";
108			cHeader.appendChild(cNext).style.color = 'black';
109
110			return cHeader;
111		}
112
113		/**
114		 * 指定した年月のカレンダー要素を生成して返す
115		 * @param {number} year  - 年の指定
116		 * @param {number} month - 月の指定
117		 */
118		function generate_month_calendar(year, month) {
119			var weekdayData = [ '日', '月', '火', '水', '木', '金', '土' ];
120			// カレンダーの情報を取得
121			var calendarData = get_month_calendar(year, month);
122
123			var i = calendarData[0]['weekday']; // 初日の曜日を取得
124			// カレンダー上の初日より前を埋める
125			while (i > 0) {
126				i--;
127				calendarData.unshift({
128					day : '',
129					weekday : i
130				});
131			}
132			var i = calendarData[calendarData.length - 1]['weekday']; // 末日の曜日を取得
133			// カレンダー上の末日より後を埋める
134			while (i < 6) {
135				i++;
136				calendarData.push({
137					day : '',
138					weekday : i
139				});
140			}
141
142			// カレンダーの要素を生成
143			var cTable = document.createElement('table');
144			cTable.className = 'calendar-table';
145
146			var insertData = '';
147			// 曜日部分の生成
148			insertData += '<thead>';
149			insertData += '<tr>';
150			for (var i = 0; i < weekdayData.length; i++) {
151				insertData += '<th>';
152				insertData += weekdayData[i];
153				insertData += '</th>';
154			}
155			insertData += '</tr>';
156			insertData += '</thead>';
157
158			// 日付部分の生成
159			insertData += '<tbody>';
160			for (var i = 0; i < calendarData.length; i++) {
161				if (calendarData[i]['weekday'] <= 0) {
162					insertData += '<tr>';
163				}
164				insertData += '<td>';
165				insertData += calendarData[i]['day'];
166				insertData += '</td>';
167				if (calendarData[i]['weekday'] >= 6) {
168					insertData += '</tr>';
169				}
170			}
171			insertData += '</tbody>';
172
173			cTable.innerHTML = insertData;
174			return cTable;
175		}
176
177		/**
178		 * 指定した年月のカレンダー情報を返す
179		 * @param {number} year  - 年の指定
180		 * @param {number} month - 月の指定
181		 */
182		function get_month_calendar(year, month) {
183			var firstDate = new Date(year, (month - 1), 1); // 指定した年月の初日の情報
184			var lastDay = new Date(year, (firstDate.getMonth() + 1), 0)
185					.getDate(); // 指定した年月の末日
186			var weekday = firstDate.getDay(); // 指定した年月の初日の曜日
187
188			var calendarData = []; // カレンダーの情報を格納
189			var weekdayCount = weekday; // 曜日のカウント用
190			for (var i = 0; i < lastDay; i++) {
191				calendarData[i] = {
192					day : i + 1,
193					weekday : weekdayCount
194				}
195				// 曜日のカウントが6(土曜日)まできたら0(日曜日)に戻す
196				if (weekdayCount >= 6) {
197					weekdayCount = 0;
198				} else {
199					weekdayCount++;
200				}
201			}
202			return calendarData;
203		}

試したこと

試したこととしては、JSのコードの中で問題がありそうな部分の削除や変更を行いました。
また様々なサイトを参考にしました。

補足情報（FW/ツールのバージョンなど）

JavaScriptに不慣れな部分があり、問題点を見つけるのに時間がかかっている状況です。
何か分かる方がいましたらご教授いただければ幸いです。

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

回答2件

結合した状態のソースが開示されていないようなのでコードを読まずに答えます。

こういうケースで一般的に問題になるのは、

結合したことにより、HTMLの構造が壊れる。<body>が2個になったり。
要素のIDやクラスの衝突
JavaScriptのグローバル変数名や関数名などの衝突
イベントハンドラの衝突。onなんとか属性を上書きしていないか。留意点として、<body onload=...> と window.onload は同じものを指します。

投稿2021/10/06 01:19