ByIdは効くがByClassNameが機能しない

<a>show</a>をclickした時にパスワードを可視化させるプログラムを組んでいる途中で
aタグにclassをつけ、javascriptで操作しようとした所
取得がうまくいかないです

idをつかっても問題ないのですが、後学のために教えていただきたいです

よろしくお願いします

以下コード

<!DOCTYPE html>
<html lang="ja">
<title></title>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
        function show_id() {
            alert("check id");
            var show_id = document.getElementById("show_id");
            show_id.innerHTML = "id";
        };
        function show_class() {
            alert("check class");
            var show_class = document.getElementsByClassName("show_class");
            show_class.innerHTML = "class";
        };
    </script>
</head>

<body>
    <li>
        <label for="password">パスワード</label>
        <input type="password" name="password" id="password">
        <a href="#" id="show_id" onclick="show_id()">Show_id</a>
        <a href="#" class="show_class" onclick="show_class()">Show_class</a>
    </li>
</body>

</html>

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

回答2件

getElementByIdの返り値はElementのため、記述のJavaScriptで問題ありませんが、
getElementsByClassNameの返り値はHTMLCollectionのため、以下のように添え字でHTMLCollection内のどのElementに対して処理を行うか記述する必要があります（今回のケースでは一つしか返ってこないので、自動的に添え字は「0」となりますが。

javascript
1show_class[0].innerHTML = "class";

投稿2017/08/12 07:12

退会済みユーザー

総合スコア0

imaharu

2017/08/12 07:23

回答ありがとうございました無事解決しました

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

ベストアンサー

getElementsByClassNameは配列ライクなオブジェクトを返します。
例示されているhtml上ではshow_classというクラスは一つしかありませんので、
show_class[0]で指定できます。

   var show_class = document.getElementsByClassName("show_class");
   //console.log(show_class);
   show_class[0].innerHTML = "class";

投稿2017/08/12 07:06

namimon

総合スコア726

imaharu

2017/08/12 13:19 編集

回答ありがとうございます追加で質問なのですが、多数のclassに対して変更を行う場合 for(let i = 0;i < 3;i++){ show_class[i].innerHTML = "class" } のような形でしか、変更できないのでしょうか。これだと、あとからhtmlを追加、削除したときに不便だと思うのですが、もっと良い方法はあるのでしょうかよろしくお願いします