JavaScriptで画像をクリックした時に、文字が表示されるようにしたい

JavaScriptで画像（test.png）をクリックした時に、文字が表示されるようにしたく
下記のように記述してみたのですが、画像をクリックしても何の反応もありません。
間違いがあればご指摘いただけないでしょうか。

html
1<body>
2    <div class="main">
3        <div class="icon"><a href="#" onclick="Click_Sub();"><img src="img/test.png"></a></div>
4        <div class="txt1"><h2>ここにテキストが表示</h2></div>
5    </div>
6
7    <!-- テキスト表示・非表示切り替えスクリプト -->
8    <script language="Javascript">
9        function Click_Sub() {
10            if (document.all.txt1.style.display == "none") {
11                document.all.txt1.style.display = "block"
12            } else {
13                document.all.txt1.style.display = "none"
14            }
15        }
16    </script>
17</body>

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

回答3件

ベストアンサー

document.allはIE独自のプロパティでIE6以下でしか使用できません。
クラス名で要素を取得する場合は、getElementsByClassNameを使ってください。

html
1<body>
2  <div class="main">
3    <div class="icon"><a href="#" onclick="Click_Sub();"><img src="img/test.png"></a></div>
4    <div class="txt1"><h2>ここにテキストが表示</h2></div>
5  </div>
6
7  <!-- テキスト表示・非表示切り替えスクリプト -->
8  <script language="Javascript">
9    function Click_Sub() {
10      var txt = document.getElementsByClassName('txt1')[0]
11      if (txt.style.display == "none") {
12        txt.style.display = "block"
13      } else {
14        txt.style.display = "none"
15      }
16    }
17  </script>
18</body>

投稿2020/03/02 06:17

hatena19

総合スコア34075

dedede_daiou

2020/03/02 06:37

document.allについて、廃止されていたことや制限があることなど全く知りませんでした。 getElementsByClassNameで実現できました。ありがとうございました。

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

document.allは5年以上前に廃止されています。

【Document.all - Web APIs | MDN】
https://developer.mozilla.org/en-US/docs/Web/API/Document/all

querySelectorやquerySelectorAllを使ってください。

【要素の取得方法まとめ - Qiita】
https://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4

投稿2020/03/02 06:16

kei344

総合スコア69606

dedede_daiou

2020/03/02 06:37

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

document.allはIE11で廃止されてますね。古いIE限定の書き方です。

HTML
1・・・
2if (document.getElementsByClassName('txt1')[0].style.display === "none") {
3    document.getElementsByClassName('txt1')[0].style.display = "block"
4} else {
5    document.getElementsByClassName('txt1')[0].style.display = "none"
6}
7・・・

chrome、新Edgeのみで動作確認していますが、大体これでいけるはずです。

投稿2020/03/02 06:15