電子書籍の厳選無料作品が豊富！

詳しい人求む！

onclickが動作しない

解決済

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

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



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

まず、ご提示のソースでは「<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

No.3

  • 回答者： yambejp
  • 回答日時：

> 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

No.1

  • 回答者： zircon3
  • 回答日時：

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


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

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

参考まで。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2020/08/17 11:06

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

Q質問する（無料）

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

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

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

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報