下記のHtml文におけるonclickの動作についての質問です。 ①現状のHtml文では、id="text-button"、id="test2"が動作しない。 ②現状のHtml文で内の document.getElementById("text-button").onclick = function () { document.getElementById("text").innerHTML = "しんのすけ"; }; を削除すると、id="test2"が動作するようになる。 ③ をの前に移動させると、全てのonclickが動作するなぜ？このようになるのでしょうか？巻き上げ？が関係していますか？詳しい方、宜しくお願い致します。慎之介 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 = "シン" }; 名前は

詳しい人求む！

onclickが動作しない

解決済

質問者：minarai_database
質問日時：2020/08/17 10:13
回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2020/08/17 11:09

こんにちは

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

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

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

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

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

- 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

No.3

回答者： yambejp
回答日時：2020/08/17 11:38

> 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()">

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.1

回答者： zircon3
回答日時：2020/08/17 10:36

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

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

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

参考まで。