「夫を成功」へ導く妻の秘訣 座談会

下記の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>

A 回答 (3件)

こんにちは



>巻き上げ?が関係していますか?
関係はありそうですが、想像なさっているのとは少々違うのではないかと思います。
(いろいろなことが起きているので…)

まず、ご提示のソースでは「<script> 」(←ここ)に全角空白がありますので、スクリプト全体がエラーでストップします。
しかしながら、巻き上げの関係で
>function test1()
だけは全角空白を解釈する前に解釈されていると考えられます。

全角空白を取り除いた場合、head内にスクリプトを置くと最初の
>document.getElementById("text-button").onclick =
で要素が見つからないため、次の属性取得、代入でエラーとなりスクリプトが停止します。
上記同様、test1は巻き上げて解釈されますが、test2の代入文は実行されません。
エラーを起こす前に、test2への代入を実行しておけば、そちらのクリック処理も生きることになるでしょう。


</body>直前に置いた場合は、
全角空白に関しては同じで、動作しません。

全角空白を取り除けば、
>document.getElementById("text-button").onclick
もエラーなく実行されますので、続いてtest2の代入も実行され、(質問者様の)予想通りの結果になっていると考えられます。
    • good
    • 0
この回答へのお礼

丁寧なご指導有難うございます。
全角、全く気づきませんでした。エディターの拡張を行いました。
<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>の次の全角空白の悪さについては、もう少し勉強したいと思います。

有難う御座いました

お礼日時:2020/08/17 12:35

> 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()">
    • good
    • 0
この回答へのお礼

ご丁寧なご指導有難うございます。
window.addEventListenerで、event handlerに組み込む事でDOM読み込み後(クリックした時)にscriptの実行が遅延できるのですね?
大変、ためになりました。
今後、HTML文より前に、<script>を置く場合は、このようにしたいと思います。
大変、勉強になりました。有難う御座います。

お礼日時:2020/08/17 12:40

JavaScriptの入門者や解説サイトで勉強されていますか?


JavaScriptをHTMLファイル内に書く際、何処に置くか・・・という説明は大抵の本や解説サイトでされているはずですが。

そういった物を参照されていない場合は、とりあえずGoogleなどで「JavaScript 記述場所」とか「JavaScript 置き場所」といった簡単なキーワードで検索してみてください。説明ページがたくさんヒットするはずです。

参考まで。
    • good
    • 0
この回答へのお礼

早速のご回答有難う御座います。
参考にさせて頂きます。

お礼日時:2020/08/17 11:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング