Q&A
ご回答ありがとうございます。
初学者ゆえ、変なクセをつけないよう、use srict前提での学習をしたいと思っております。
getElementByIdの要素取得について学習をしております。
下記コードを作成、ボタン押しで実行したところ、要素は取得されず、次のエラーメッセージが返されております。
Uncaught ReferenceError: onH1ButtonClick is not defined
at HTMLButtonElement.onclick (index.html:12)
html
1<body> 2 3 <h1 id="headTitle">idによる要素取得</h1> 4 <button type="button" onclick="onH1ButtonClick()">h1要素の取得</button> 5 6 <script src="js/main.js"></script> 7</body>
JavaScript
1"use strict"; { 2 3function onH1ButtonClick() { 4 //idがheadTitleの要素を取得。 5 let headTitle = document.getElementById("headTitle"); 6 7 //取得した要素をコンソール表示。 8 console.log(headTitle); 9} 10 11}
初歩的な何かを見落としているとは思うのですが、原因を見つける事が出来ませんで、アドバイスを頂けますと幸いです。
回答5件
0
スコープの話だと思うので、関数とスコープが参考になるんじゃないかと思います。
スコープ区切ったら外から見えないのでは？
「JavaScript では script タグを使えばコードをいくつでも読み込むことができるので、他の人が作ったコードを読み込んだときに、そちらの定数名や変数名と衝突しないように、コードをブロックでこのように囲っておくのは良い習慣」
と言うのは、納得も理解もできますが、全部無条件に使えるし何でも読み込み放題ということではないと思います。
投稿2019/08/24 02:52
総合スコア2401
0
"use strict";を消すとできると思います。
おそらく、strictモードにする事でスコープが厳密になり、onH1ButtonClick関数がブロック文の中でしか使えないようになったのではないでしょうか？
javascript
1"use strict"; 2onH1ButtonClick(); //おそらく、ここから呼んでもエラーになると思います。 3{ 4 /* onH1ButtonClickはこのブロック文内でしか使えない=ローカル関数になっている */ 5 function onH1ButtonClick() { 6 //略 7 } 8}
投稿2019/08/24 02:48
編集2019/08/24 02:56
総合スコア67
0
外側のかっこを外してください。
JavaScript
1"use strict"; 2 3function onH1ButtonClick() { 4 //idがheadTitleの要素を取得。 5 let headTitle = document.getElementById("headTitle"); 6 7 //取得した要素をコンソール表示。 8 console.log(headTitle); 9}
投稿2019/08/24 01:51
総合スコア777
ご回答ありがとうございます。
ドットインストール の詳細JavaScript基礎文法編 #24で、（有料コンテンツの部分ではありますが。。。）
「JavaScript では script タグを使えばコードをいくつでも読み込むことができるので、他の人が作ったコードを読み込んだときに、そちらの定数名や変数名と衝突しないように、コードをブロックでこのように囲っておくのは良い習慣」という記載があって、{}を追加しておりますが、これがマズいという事でしょうか？
0
ベストアンサー
html
1<h1 id="headTitle">idによる要素取得</h1> 2<button type="button" onclick="onH1ButtonClick()">h1要素の取得</button> 3<script> 4"use strict"; 5 6function onH1ButtonClick() { 7 //idがheadTitleの要素を取得。 8 let headTitle = document.getElementById("headTitle"); 9 10 //取得した要素をコンソール表示。 11 console.log(headTitle); 12} 13</script>
投稿2019/08/24 02:05
総合スコア2937
ご回答ありがとうございます。
ドットインストール の詳細JavaScript基礎文法編 #24で、（有料コンテンツの部分ではありますが。。。）
「JavaScript では script タグを使えばコードをいくつでも読み込むことができるので、他の人が作ったコードを読み込んだときに、そちらの定数名や変数名と衝突しないように、コードをブロックでこのように囲っておくのは良い習慣」という記載があって、{}を追加しておりますが、これがマズいという事でしょうか？
マズくはないです。
このコードでは不要なので削除しただけ。
早速のご回答ありがとうございます。もう少し踏み込ませてください。
確かにこのコードでは、他の人が作ったコードを読み込む事はないので、該当の{ }が不要なのは分かります。
実際、{ }を外すと要素を取得してくれるのは分かります。
ただ、今回の場合は、不要というよりむしろ、{ }で範囲指定をしてしまったが為にエラーメッセージが起きた原因である事を勉強させてもらいました。
何故、{ }を入れるとエラーになってしまうのか、教えて頂けると幸いです。
onclickだとスコープの関係上、
js/main.jsのonH1ButtonClickを読み込めなくなるからです。
そもそもonclickを使うのは良くないのでaddEventListenerを使用して
document.getElementById('b').addEventListener('click', () => {
onH1ButtonClick();
});
のように記述するべきです。
ご説明、アドバイスありがとうございます。
{ }の範囲指定というよりむしろ、
onclickを使ったのがマズかったという事ですね。。。
色々とありがとうございました。
0
手元の環境では動きました。
functionのReferenceErrorも出ないしh1要素がきちんととれています。
ブラウザは何でしょうか？Chrome76.0.3809.100、FireFox68.0.2、IE11で確認できています。
出ているエラーはそれだけですか？jsファイル読み込みできていないとかはないですか？キャッシュクリアも試してみてください。
main.jsの冒頭に(functionの中には入れず) console.log(1);とか入れて画面表示時にコンソールに出るかも確かめてください。
投稿2019/08/24 01:39
編集2019/08/24 01:41
総合スコア80850
早速のご回答ありがとうございます。
申し訳ありません。コードにuse strictが漏れておりましたので、追記致しました。
ご回答頂いた後、確かにuse strictを外すと要素が取れている事、確認しました。
ただ、use strictを使用しても、要素は取ってくれるような気がするのですが、、、、エラーになってしまいます。
{}自体がブロックスコープになるので外からはアクセスできないですね。
ご回答ありがとうございます。
スコープについて、再度、学習したいと思います。
そして、今後は、今回のように { }原因のエラーが出るようなら、use strict; { }条件を満たすコードに書き換えたいと思います。
そもそもきちんと設計・管理できていれば衝突など考える必要はないかとは思います。習慣や慣習を倣うのは良い心掛けですが、なんでもかんでもやっとけってことではないので。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/24 03:25