HTMLでjavascriptを使ってクリックイベントを行いたい

前提・実現したいこと

HTMLを試しにやってみたのですが、クリックしたときテキストの内容を変えるという処理が動きません。

発生している問題・エラーメッセージ

クリックしても何も起きませんでした。

該当のソースコード

index.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>
5      あうあう公式HP
6    </title>
7    <meta charset="utf-8">
8    <link rel="stylesheet" href="style.css">
9    <script href="index.js"></script>
10  </head>
11  <body>
12    <h class="title">ここが始まりです。</h>
13    <h class="test">あうあう</h>
14    <div id="osuna">押すんじゃねぇぞ</div>
15  </body>
16</html>

index.js

javascript
1document.getElementById('osuna').onclick = function clickevent() {
2  document.getElementById('osuna').textContent = "押すなって、、、";
3};

補足情報（FW/ツールのバージョンなど）

ブラウザ：GoogleChrome

行動規範の内容に同意します

回答2件

二つの問題があります。まず、以下の箇所ですが、

HTML
1<script href="index.js"></script>

href属性ではなく、src属性にする必要があります。

HTML
1<script src="index.js"></script>

これでJavaScriptが読み込まれますが、エラーになります。なぜなら、JavaScriptが実行された時点では、まだid="osuna"のdiv要素がないからです。

これを避けるには、古典的な方法としては下記があります。

JavaScript
1window.onload = function() { // 追加
2  document.getElementById('osuna').onclick = function clickevent() {
3    document.getElementById('osuna').textContent = "押すなって、、、";
4  };
5} // 追加

「古典的」と書いたのは、onloadに代入してしまうと、他にwindow.onloadイベントがある場合に上書きしてしまうからで、以下のようにaddEventListenerを使う方が良いでしょう。以下は、onclick=の方もaddEventListenerに変更しています。

JavaScript
1window.addEventListener('load', function() {
2  const osuna = document.getElementById('osuna')
3  osuna.addEventListener('click', function() {
4      osuna.textContent = "押すなって、、、";
5  })
6})
7