質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

innerHTMLが反映されない

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 12K+

revoiot

score 162

innerHTMLを用いて、htmlの内容を書き換えるという操作を行いたいのですが、反映されず困っています。

document.getElementById("aaa").innerHTML ="こんにちは";

どこのコードに問題があるのでしょうか?

大変恐縮ですが、ご回答頂けると幸いです。

よろしくお願いします。

追加分

      <div class="press-news">
        <img src="box img/box sidebar/press-news.gif" alt="">
        <p class="dates">2013年8月31日</p>
        <p id = "super">
          * Fujii LENA Love Selection*
        </p>
        <p class="borderline">
          10月中旬販売開始
        </p>
        <p class="dates" >2013年8月31日</p>
        <p>
          * Fujii LENA Love Selection*
        </p>
        <p class="borderline">
          10月中旬販売開始
        </p>
        <p class="dates">2013年8月31日</p>
        <p>
          * Fujii LENA Love Selection*
        </p>
        <p class="borderline">
          10月中旬販売開始
        </p>
      </div>

JavaScript

<script>
function () {
  document.getElementById("super").innerHTML = "こんにちは";
}
</script>
コード

イメージ説明

HTML

        <div class="bar">
          <form>
            <input type="text" id="aaa" name="namae" size="20" maxlength="20">
            <input type="button" value="送信">
          </form>
          <form>
            <input type="text" id="bbb" name="namae" size="20" maxlength="20">
            <input onclick="xxx()" type="button" value="送信"></form>
        </div>

コード

CSS

.bar{
  width:210px;
  height:350px;
  font-size:14px;
  display:inline-block;
  background-color:#fff2de;
}

コード


Javascript

<script>
    function xxx() {
        document.getElementById("aaa").value = document.getElementById("bbb").value;
        document.getElementById("aaa").style.color = "red";
        document.getElementById("aaa").innerHTML ="こんにちは";
    }
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2017/05/01 23:16 編集

    http://co-712.it.3919.com/ で公開されている藤井リナの画像ですが、肖像権は大丈夫でしょうか。藤井リナ本人と写真の著作権者に許諾を得る必要があると思われますが…。

    キャンセル

  • revoiot

    2017/05/01 23:52 編集

    こちらはwebsite作成の練習用として作成していますし、商用利用はもちろんするつもりはございません。よろしくお願いします。語弊を招く書き方をしてしまい、大変失礼いたしました。

    キャンセル

  • think49

    2017/05/02 00:16

    商用利用しなくとも、肖像権、複製権、送信可能化権は侵害していると思われます。 法的な面を置いておくとしても、あなたが撮影したあなた自身の顔写真を「商用利用しないから」という理由で無断転載されている状況を想像してみたら気分が悪いものではないでしょうか。

    キャンセル

回答 4

+9

input要素は「空要素」なので innerHTML に値を入れても表示に反映されません。

【input 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

【element.innerHTML - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+3

document.getElementById("aaa").value ="こんにちは";

参考:http://faq.creasus.net/02/0801/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/02 00:02

    ご回答いただきありがとうございます。inputをつかわず、pでHTML内容変更することを試みましたが、うまくいきませんでした。質問画面に写真とHTML追加させていただきました。
    classではなく、idを使用し、inputでなく、pを使用しましたが、preview画面に変化はありませんでした。
    なぜpを使用しても、変化がないのでしょうか?
    大変恐縮ですが、ご回答いただけると幸いです。よろしくお願いします。

    キャンセル

  • 2017/05/02 00:17

    開発コンソールでJSのinnerHTMLの行にブレークポイントを付けて実行してみると分かると思いますが
    、そもそも追加した記述では関数が呼ばれていませんので、何無しらのイベントで実行されるようにしてください。

    キャンセル

  • 2017/05/02 17:45 編集

    どうしてinnerHTMLにこだわるのでしょうか?
    もともと、pは、formで内容を送信するような仕様ではありません。
    どうしてもp(というかinnerHTML)を使いたいのであれば、
    form送信時に、pの中身も付与して送信するようにしてください。
    form javascript 送信時、とか、form javascript submit
    とかで、Google先生に聞いてみましょう。

    もしくは、<input type="hidden" id="aaa">
    などで、input要素を用意しておき、
    pの中身が変わったときに、inputのvaleを変更するようにしてもいいかもしれません。

    そして、yuki84webさんの言うとおり、関数が実行されてないですね。

    キャンセル

+3

 innerHTML の仕様

「空要素を innerHTML で書き換えようとした場合の仕様上の動作はどうなっているのか」と思って確認してみましたが、HTML では特に言及がないですね。
XML文書なら "InvalidStateError" DOMException を返すかもしれませんが…。

 innerHTML がダメなら outerHTML を使えばいいじゃない

完全にネタコードですが。

<style>
.foo {
  color: red;
}
</style>
</head>
<body>
<div class="bar">
  <form>
    <input type="text" id="aaa" name="namae" size="20" maxlength="20">
    <input type="button" value="送信">
  </form>
  <form id="sample">
    <input type="text" id="bbb" name="namae" size="20" maxlength="20">
    <input type="submit" value="送信">
  </form>
</div>
<script>
'use strict';
document.getElementById('sample').addEventListener('submit', function handleSubmit (event) {
  var input = document.getElementById('aaa');

  input.classList.add('foo');
  input.outerHTML = input.outerHTML.replace(/value="[^"]*"/, '').replace(/(?=\/?>)/, 'value="こんにちは" ');
  event.preventDefault();
}, false);
</script>

 innerHTML で文字列を挿入する是非について

innerHTML はHTMLタグを上書き挿入するプロパティであって、文字列を挿入するのには適していません。
innerHTML は <>& をエスケープしなければ、文字列として挿入できません。
文字列を挿入するのなら、textContent や createTextNode() を使用して下さい。

 HTMLInputElement.prototype.value

input要素ノードは HTMLInputElement を継承している為、HTMLInputElement.prototype.value を使用できます。
HTMLInputElement.prototype.value は innerHTML と違い、<>& をエスケープする必要がありません。
各種要素ノードには便利なプロパティ/メソッドが用意されているので、要素別に適切な機能を活用して下さい。

 SyntaxError: Unexpected token (

function () {
  document.getElementById("super").innerHTML = "こんにちは";
}

上記コードは関数宣言でも関数式でもない為、SyntaxError の例外を返します。
関数宣言は名前が必須であり、関数式は function キーワードから始まる事は出来ません

Re: revoiot さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/02 17:53

    伝わらないだろうなぁ。。。w

    キャンセル

+1

こうするとわかりますが、ブラウザによって戻り値が違います。

<input type="text" id="aaa" name="namae" size="20" maxlength="20">
<script>
var aaa=document.getElementById("aaa");
aaa.innerHTML="こんにちは";
for(var i in aaa){
  if(i.match(/^inner/)) console.log(i+":"+aaa[i]);
}
</script>
  • IE
    innerHTMLもinnerTextも「こんにちは」が返る
  • Firefox
    innerHTMLは「こんにちは」が返るが、innerTextは空
  • chrome
    innerHTMLもinnerTextも空

つまりinnerHTMLは書き換えられるが参照できたりできなかったりして
しかもそれがHTMLに反映されることはないということです

ちなみに

console.log(aaa.firstChild);


すれば、どのブラウザでも「こんにちは」を得ることができます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る