ボタンを押すとalertに書いてあるメッセージが表示されるようにしたい。
例）
JavaScriptでボタンを押すとメッセージが警告メッセージとして出されるをつくっています。
ボタンをクリックしても警告メッセージが出ません。
解決方法を教えて下さい。
特になし
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>クリックボタン</title>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
window.alert("クリックされたよ!");
}, false);
</script>
</head>
<body>
<h1>クリックボタン</h1>
<button id="btn">表示</button>
<button id="btn2" onclick="click();">CLICK</button>
</div>
</body>
</html>
ボタンのIDを「btn」と「btn2」の2つに分けました。
よくある間違いの一つですが、質問のコードの let btn = document.getElementById('btn'); が実行される時点では、<button id="btn">表示</button> がまだ存在しないのです。
ブラウザのディベロッパーツールを開いてその Console タブを見てください。エラーが出ているはずです。Source タブでソースを表示してリロードすると、どこでエラーが出ているか分かると思います。スクリプトが期待通り動かない場合は、まずそういうことをやってみましょう。
お世話になります。 まず解決法からですが、
１．window.addEventListener("load", () => {行いたい処理})と変更
２．操作したい要素の後にJavaScriptの記載する
かなと思います 個人的には１番目がおすすめです。
<button id="btn">表示</button> の生成前に
let btn = document.getElementById('btn') が実行されてしまっているからです。
DOM要素のパース（処理）中にJavaScriptも実行されており、
<button id="btn">表示</button> のパース前に
let btn = document.getElementById('btn') が実行されてしまったわけです。
そうすると、document.getElementById('btn') には何も存在しない（null）のため
btnはnullとなり、後続の、btn.addEventListenerがエラーを起こします。
このときのエラーが
Cannot read properties of null (reading 'addEventListener')
となります（properties of null つまり 内容が存在しない）
１．パースが終わるまで待つ
２．必要要素のパース完了後にJavaScriptを実行する
１．についてはまずwindowの内容（これにはDOM要素が含まれています）
が読み込まれてから内部の関数を実行します。
そのため、<button id="btn">表示</button>の存在が保証され
let btn = document.getElementById('btn') が正常に動きます
DOM要素全部用意できてから、内部の関数を実行してね ということです
２．についてはHTMLというのは記載順（上から下）にパースされます
そのため必要要素のパースが完了しているので
必然的に let btn = document.getElementById('btn') が正常に動きます
関数を実行時には対象の要素があるぞ というわけです
説明した内容を適応したHTMLを添付しておきますね
問題なく動く・・・はず！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>クリックボタン</title>
<script>
//１．パースが終わるまで待つ
window.addEventListener("load", () => {
const btn = document.getElementById('btn');
const btn2 = document.getElementById('btn2');
const listener =
btn.addEventListener('click', function() {
window.alert("表示がクリックされたよ!");
} , false);
btn2.addEventListener('click', function() {
window.alert("CLICKがクリックされたよ!");
}, false);
});
</script>
</head>
<body>
<h1>クリックボタン</h1>
<button id="btn">表示</button>
<button id="btn2">CLICK</button>
<button id="btn3">くりっく</button>
<script>
//２．必要要素のパース完了後にJavaScriptを実行する
const btn3 = document.getElementById('btn3');
btn3.addEventListener('click', function() {
window.alert("くりっくがクリックされたよ!");
});
</script>
</body>
</html>
@consul_akihiro
Questioner返信ありがとうございます。
私はDOM操作が苦手なのでそこを克服していきたいです。
複雑ですからねぇ・・・
今回の場合は、window.addEventListener("load")
（DOMは生成後じゃないと操作できない）とか
パース順序（HTMLは上から下に解釈される）とかいきなり出てきましたからね・・・
その知識の不足のため、解決法が見つからなかったという感じでしょうから
それでも克服には、色々試すのが一番だと思いますね
F12を押してディベロッパーツールを出し、エラーがないかを探したり
console.log()を使用して変数が正常な値かを確かめたりしておくと
色々情報の量が増えて、解決しやすくなると思いますよ！
今回の場合も
「 Cannot read properties of null (reading 'addEventListener') 」
と出ていたので、properties of null（プロパティがnull）と絞り込めるので
なぜnullになるのか、という疑問に代わると思います
そうすれば 「addEventListener null」 で検索すれば
解決策が出てきたりします
後は勉強を続ければおのずと、点と点が紐づいてバッとわかる時が来るように
なると思います！ めげずに頑張ってください！
自由に操作できるようになると楽しいですよ！
もし疑問・問題等、解決していた場合はクローズお願いします！
scriptを書く位置を変えただけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>クリックボタン</title>
</head>
<body>
<h1>クリックボタン</h1>
<button id="btn">表示</button>
<button id="btn2" onclick="click();">CLICK</button>
</div>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
window.alert("クリックされたよ!");
}, false);
</script>
</body>
</html>
click()だと動きませんね。doClick()に変えました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>クリックボタン</title>
</head>
<body>
<h1>クリックボタン</h1>
<button id="btn">表示</button>
<button id="btn2" onclick="doClick();">CLICK</button>
</div>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
window.alert("クリックされたよ!");
}, false);
function doClick() {
alert("btn2クリックされたよ!");
}
</script>
</body>
</html>
@consul_akihiro
Questioner回答ありがとうございます。
どうしてHeadの中にsprictを書くのはダメで、bodyの中にsprictを書くのは大丈夫なんでしょうか?
解説よろしくお願いします。