質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

828閲覧

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

Kwinter

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/10/06 00:50

編集2021/10/06 00:52

前提・実現したいこと

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

実現したいこととしては、先ほど説明した2つの機能を表示できるようにしたいと考えています。
イメージとしては、画面を半分に分けて片方にはカレンダー機能(日付をクリックすることで日付を取得できる)を、もう片方には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に不慣れな部分があり、問題点を見つけるのに時間がかかっている状況です。
何か分かる方がいましたらご教授いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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

投稿2021/10/06 01:19

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kwinter

2021/10/06 01:53

回答ありがとうございました。 問題点などの詳しい説明助かりました。
guest

0

ベストアンサー

onclickプロパティは1つしかないため、1つ以上のイベントハンドラを割り当てることはできません。

下の例では、JavaScript でのハンドラの追加は、既存のハンドラを上書きします:
ブラウザイベントの紹介

以上のことは、onloadにも言えるため、<body onload="loadImage('preview');">window.onload = function() {...}に上書きされます。

addEventListener を使った方がいいと思います。

Web標準の開発者はずっと前に理解しており、特別なメソッド addEventListener と removeEventListener を使うことで、ハンドラを管理する別の方法を提案しました。これらはこのような問題から解放されています。

addEventListener | ブラウザイベントの紹介

投稿2021/10/06 01:25

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kwinter

2021/10/06 01:51

回答ありがとうございました。 おかげで上手く表示させることができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問