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

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

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

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

Q&A

解決済

2回答

14586閲覧

<button>タグをクリックするとUncaught ReferenceErrorというエラーが出る。

tkm0604

総合スコア554

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

0グッド

0クリップ

投稿2021/11/16 08:47

編集2021/11/16 08:48

添付画像のように、「文字を描く」ボタンを押すと、画像に文字が表示されるscriptを実装したいです。
イメージ説明

「文字を描く」ボタンを押すと、
「Uncaught ReferenceError: drawText is not defined at HTMLButtonElement.onclick」
というエラーが解決できません。。。

また、function loadImage(id)で読み込んでいる画像も出力されません。

HTML

1<div 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</div>

javascript

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

HTML内に<script></script>で囲って上記scriptを書くと正常に動作しましたが、app.jsファイルにscriptを書くとエラーになります。

どこが間違えているのでしょうか?
よろしくお願いします。

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

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

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

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

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

maisumakun

2021/11/16 08:55

> app.jsファイルにscriptを書くとエラーになります。 app.jsは、どのようにHTMLから読み込んでいますか?
guest

回答2

0

ベストアンサー

また、function loadImage(id)で読み込んでいる画像も出力されません。

そもそも、<div>ではonloadイベントは発生しないのではないでしょうか。

ページ全体のDOMContentLoadedで動かすのが妥当ではないかと考えます。

投稿2021/11/16 08:58

maisumakun

総合スコア145779

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

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

tkm0604

2021/11/16 10:49 編集

<div>ではonloadイベントは発生しないんですね。勉強になりました。 <body> タグにonload="loadImage('preview');" で画像表示されました。
guest

0

<div onload="loadImage('preview');">

divにloadイベントは無理でしょう

javascript

1window.addEventListener('DOMContentLoaded', ()=>{ 2 loadImage('preview'); 3});

のような処理にすればいいのでは?

投稿2021/11/16 08:57

yambejp

総合スコア116192

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問