下記のHtml文におけるonclickの動作についての質問です。
①現状のHtml文では、id="text-button"、id="test2"が動作しない。
②現状のHtml文で<script>内の
document.getElementById("text-button").onclick = function () {
document.getElementById("text").innerHTML = "しんのすけ";
};
を削除すると、id="test2"が動作するようになる。
③<script>を</body>の前に移動させると、全てのonclickが動作する
なぜ?このようになるのでしょうか?巻き上げ?が関係していますか?
詳しい方、宜しくお願い致します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>慎之介</title>
<script>
document.getElementById("text-button").onclick = function () {
document.getElementById("text").innerHTML = "しんのすけ";
};
function test1() {
document.getElementById("test1").value = "sinnosuke"
};
var test2 = function() {
document.getElementById("test2").value = "シンノスケ"
};
function test4(obj) {
obj.value = "シン"
};
</script>
</head>
<body>
<div id="text-button">
<p id="text">名前は</p>
</div>
<input id="test1" type="button" value="ボタン1" onclick="test1()">
<input id="test2" type="button" value="ボタン2" onclick="test2()">
</body>
</html>
No.2ベストアンサー
- 回答日時:
こんにちは
>巻き上げ?が関係していますか?
関係はありそうですが、想像なさっているのとは少々違うのではないかと思います。
(いろいろなことが起きているので…)
まず、ご提示のソースでは「<script> 」(←ここ)に全角空白がありますので、スクリプト全体がエラーでストップします。
しかしながら、巻き上げの関係で
>function test1()
だけは全角空白を解釈する前に解釈されていると考えられます。
全角空白を取り除いた場合、head内にスクリプトを置くと最初の
>document.getElementById("text-button").onclick =
で要素が見つからないため、次の属性取得、代入でエラーとなりスクリプトが停止します。
上記同様、test1は巻き上げて解釈されますが、test2の代入文は実行されません。
エラーを起こす前に、test2への代入を実行しておけば、そちらのクリック処理も生きることになるでしょう。
</body>直前に置いた場合は、
全角空白に関しては同じで、動作しません。
全角空白を取り除けば、
>document.getElementById("text-button").onclick
もエラーなく実行されますので、続いてtest2の代入も実行され、(質問者様の)予想通りの結果になっていると考えられます。
丁寧なご指導有難うございます。
全角、全く気づきませんでした。エディターの拡張を行いました。
<script>でエラーが発生するとその場で<script>が停止しするの理解できました。
<script>
var test2 = function () {
document.getElementById("test2").value = "シンノスケ"
};
document.getElementById("text-button").onclick = function () {
document.getElementById("text").innerHTML = "しんのすけ";
};
function test1() {
document.getElementById("test1").value = "sinnosuke"
};
</script>
と、書き換えたり
<script>
document.getElementById("text-button").onclick = function () {
document.getElementById("text").innerHTML = "しんのすけ";
};
function test1() {
document.getElementById("test1").value = "sinnosuke"
};
</script>
<script>
var test2 = function () {
document.getElementById("test2").value = "シンノスケ"
};
</script>
とすれば、とりあえず、id="test2"のonclickが動くのを確認できました。
大きな、一歩です。
<script>の次の全角空白の悪さについては、もう少し勉強したいと思います。
有難う御座いました
No.3
- 回答日時:
> document.getElementById("text-button").
実際のHTML要素が提示される前に参照することはできません
こんな感じ(onclickはaddEventListenerにした方がよいです)
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.getElementById("text-button").addEventListener('click',function () {
document.getElementById("text").innerHTML = "しんのすけ";
});
});
function test1() {
document.getElementById("test1").value = "sinnosuke"
};
var test2 = function() {
document.getElementById("test2").value = "シンノスケ"
};
function test4(obj) {
obj.value = "シン"
};
</script>
<div id="text-button">
<p id="text">名前は</p>
</div>
<input id="test1" type="button" value="ボタン1" onclick="test1()">
<input id="test2" type="button" value="ボタン2" onclick="test2()">
ご丁寧なご指導有難うございます。
window.addEventListenerで、event handlerに組み込む事でDOM読み込み後(クリックした時)にscriptの実行が遅延できるのですね?
大変、ためになりました。
今後、HTML文より前に、<script>を置く場合は、このようにしたいと思います。
大変、勉強になりました。有難う御座います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
このQ&Aを見た人はこんなQ&Aも見ています
-
「環境が人を育てる」って本当?環境によって人格や生き方は本当に変わるのか
環境が人生に与える影響は実際どれほどのものなのか、専門家の田宮由美さんに伺った。
-
onClickで関数呼出し後に、結果に応じてsubmitを実行する方法
JavaScript
-
Javascript_submit()完了後に処理したい
JavaScript
-
「マスタ」と「テーブル」の違いとはなんでしょうか?
Oracle
-
-
4
return trueとreturn falseの用途・違いは・・・?
JavaScript
-
5
あるDBから別のDBのテーブルをselectしたい
MySQL
-
6
SQLのエラー(~付近に不適切な構文があります)
SQL Server
-
7
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
8
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
9
onClickに複数の関数を挿入する方法
JavaScript
-
10
value内に変数を入れたい
JavaScript
-
11
jspでbeanを使いたいのですが...
Java
-
12
HTMLからフォルダを開きたい
HTML・CSS
-
13
JSPファイルで生じるエラーをどのように修正するか分かりません
Java
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptのfileオブジェクト...
-
onchangeイベントを強制的に発...
-
JSのボタンを複数う使うには
-
IE8で<input type="file">のテ...
-
javascriptからphpの呼び出し
-
開いた子ウィンドウにあるボタ...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
ひとつのボタンでタイマーを動...
-
C言語クイックソートの比較総回...
-
カレンダーに印を付けたい
-
ラジオボタンで選択した項目の...
-
ラジオボタンの選択でチェック...
-
VBScriptでpingを実行(ブラウザ...
-
confirmで2行メッセージを出力する
-
クリックの度に加算していくには?
-
出発駅A、到着駅Bを選択すると...
-
入力フォームに半角スペース以...
-
プルダウンの値をphpファイルへ...
-
ユーザーフォームでの検索結果...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
javaScriptの変数をJavaの変数...
-
innerHTML内では改行は禁止?
-
formのfileの値をhiddenでも持...
-
ボタンかリンクをクリックする...
-
JavaScriptのfileオブジェクト...
-
onClickがinput type="image"だ...
-
javascriptで作成されたテーブ...
-
開いた子ウィンドウにあるボタ...
-
コードレビューをお願いします。
-
ボタンをクリックするとテキス...
-
ポップアップブロックにならな...
-
VB.NETで<Input>タグ、<text...
-
ボタンをクリックして文字を置...
-
テキストフィールド未入力の場...
-
URL 判定
-
javascriptでtextareaに文字列...
おすすめ情報