JavascriptをHtmlに変換する

前提・実現したいこと

getElementsByTagName,getElementById,getElementsByClassNameを使ってhtml表示を変更したいです。

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

クリックしたとき一つ目のgetElementsByTagNameしか変更されません。


### 該当のソースコード
<html>
<head>
<meta charset="utf-8">
<meta robot="noindex">
</head>
<body>
    <div class="wrap"> 
    <div class="div">
        <p class="div">aa株式会社</p>
    </div>
    <span id="corp">株式会社aa</span>
    <div class="class"></div>
    <button type="button" onclick="clicker();">ボタンを押すと？</button>
    </div>
    <script>
        function clicker(){
            var changeName = document.getElementsByTagName('p');
            changeName[0].innerHTML = "aa株式会社は";
            var changeId = document.getElementById('corp').value;
            changeId[0].innerHTML = "OO事業を";
            var changeClass = document.activeElementByClassName('class');
            changeClass[0].innerHTML = "運営しています";
        }
    </script>
</body>
</html>
```ここに言語名を入力
html,Javascript

試したこと

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

m.ts10806

2018/08/27 07:07

このタイトルではあらぬ誤解を与える（要件が読めない）ためもう少し質問内容によせたタイトルに修正してください。

m.ts10806

2018/08/27 07:08

また、コードブロック内にはコードのみを入れてください。それ以外のものがあると再現確認の際に邪魔となります。

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

回答4件

使い分けについてはすでに良い回答がでているので別の考えとして
querySelectorで処理する例

javascript
1document.querySelector('p').textContent= "xxx";
2document.querySelector('#corp').textContent= "yyy";
3document.querySelector('.class').textContent= "zzz";
4

投稿2018/08/27 07:35

yambejp

総合スコア114769

スクリプトにちょこちょこ間違いがあったので

javascript
1       function clicker(){
2            var changeName = document.getElementsByTagName('p');
3            changeName[0].innerHTML = "aa株式会社は";
4            var changeId = document.getElementById('corp');
5            changeId.innerHTML = "OO事業を";
6            var changeClass = document.getElementsByClassName('class');
7            changeClass[0].innerHTML = "運営しています";
8        }

に変更してみてください。

投稿2018/08/27 07:13

yukihisa

総合スコア672

yukihisa

2018/08/27 07:15

あぁ、回答が完全に丸被りした。。。 mts10806　様のほうが詳しく書いているのでそちらを見てください。

m.ts10806

2018/08/27 07:20

投稿日時まで丸かぶりですねw

yukihisa

2018/08/27 07:22

えぇ、おそらく数秒差ですねｗ編集中に確認しながら回答したつもりでしたが、さすがにここまで丸被りだとどうしようもないorz

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

ベストアンサー

.valueは基本的にはinputタグのvalueを取得する際に使用されます。
例えばdivタグの中にあるテキストを取得したい場合には利用できません。
今回の場合、別に内部のテキスト置換とかしないので、エレメントそのもので良いのでは。
.activeElementByClassName　なんてありましたっけ？
見た感じgetElementsByClassNameで良さそうです。

を踏まえたうえで、やりたいことを実現したっぽいコード↓

js
1        function clicker(){
2            var changeName = document.getElementsByTagName('p');
3            changeName[0].innerHTML = "aa株式会社は";
4            var changeId = document.getElementById('corp');
5            changeId.innerHTML = "OO事業を";
6            var changeClass = document.getElementsByClassName('class');
7            changeClass[0].innerHTML = "運営しています";
8        }
9