Q&A
http://co-712.it.3919.com/ で公開されている藤井リナの画像ですが、肖像権は大丈夫でしょうか。藤井リナ本人と写真の著作権者に許諾を得る必要があると思われますが…。
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>
こちらはwebsite作成の練習用として作成していますし、商用利用はもちろんするつもりはございません。よろしくお願いします。語弊を招く書き方をしてしまい、大変失礼いたしました。
商用利用しなくとも、肖像権、複製権、送信可能化権は侵害していると思われます。 法的な面を置いておくとしても、あなたが撮影したあなた自身の顔写真を「商用利用しないから」という理由で無断転載されている状況を想像してみたら気分が悪いものではないでしょうか。
回答4件
0
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
投稿2017/05/01 13:15
総合スコア69645
0
innerHTML の仕様
「空要素を innerHTML で書き換えようとした場合の仕様上の動作はどうなっているのか」と思って確認してみましたが、HTML では特に言及がないですね。
XML文書なら "InvalidStateError" DOMException を返すかもしれませんが…。
innerHTML がダメなら outerHTML を使えばいいじゃない
完全にネタコードですが。
HTML
1<style> 2.foo { 3 color: red; 4} 5</style> 6</head> 7<body> 8<div class="bar"> 9 <form> 10 <input type="text" id="aaa" name="namae" size="20" maxlength="20"> 11 <input type="button" value="送信"> 12 </form> 13 <form id="sample"> 14 <input type="text" id="bbb" name="namae" size="20" maxlength="20"> 15 <input type="submit" value="送信"> 16 </form> 17</div> 18<script> 19'use strict'; 20document.getElementById('sample').addEventListener('submit', function handleSubmit (event) { 21 var input = document.getElementById('aaa'); 22 23 input.classList.add('foo'); 24 input.outerHTML = input.outerHTML.replace(/value="[^"]*"/, '').replace(/(?=\/?>)/, 'value="こんにちは" '); 25 event.preventDefault(); 26}, false); 27</script>
innerHTML で文字列を挿入する是非について
innerHTML はHTMLタグを上書き挿入するプロパティであって、文字列を挿入するのには適していません。
innerHTML は <>& をエスケープしなければ、文字列として挿入できません。
文字列を挿入するのなら、textContent や createTextNode() を使用して下さい。
HTMLInputElement.prototype.value
input要素ノードは HTMLInputElement を継承している為、HTMLInputElement.prototype.value を使用できます。
HTMLInputElement.prototype.value は innerHTML と違い、<>& をエスケープする必要がありません。
各種要素ノードには便利なプロパティ/メソッドが用意されているので、要素別に適切な機能を活用して下さい。
SyntaxError: Unexpected token (
JavaScript
1function () { 2 document.getElementById("super").innerHTML = "こんにちは"; 3}
上記コードは関数宣言でも関数式でもない為、SyntaxError の例外を返します。
関数宣言は名前が必須であり、関数式は function キーワードから始まる事は出来ません。
Re: revoiot さん
投稿2017/05/01 14:01
編集2017/05/01 15:24総合スコア18196
伝わらないだろうなぁ。。。ｗ
0
ベストアンサー
javascript
1document.getElementById("aaa").value ="こんにちは";
投稿2017/05/01 12:57
編集2017/05/01 13:01
総合スコア1857
ご回答ありがとうございます。
今回、どうしてもinnerHTMLを使いたいのですが、その場合どうコードすればよいでしょうか？
大変恐縮ですが、よろしくお願いします。
それならinputなどを使わずpなどに変えて下さい
ご回答いただきありがとうございます。inputをつかわず、pでHTML内容変更することを試みましたが、うまくいきませんでした。質問画面に写真とHTML追加させていただきました。
classではなく、idを使用し、inputでなく、pを使用しましたが、preview画面に変化はありませんでした。
なぜpを使用しても、変化がないのでしょうか？
大変恐縮ですが、ご回答いただけると幸いです。よろしくお願いします。
開発コンソールでJSのinnerHTMLの行にブレークポイントを付けて実行してみると分かると思いますが
、そもそも追加した記述では関数が呼ばれていませんので、何無しらのイベントで実行されるようにしてください。
どうしてinnerHTMLにこだわるのでしょうか？
もともと、pは、formで内容を送信するような仕様ではありません。
どうしてもp（というかinnerHTML）を使いたいのであれば、
form送信時に、pの中身も付与して送信するようにしてください。
form javascript 送信時、とか、form javascript submit
とかで、Google先生に聞いてみましょう。
もしくは、<input type="hidden" id="aaa">
などで、input要素を用意しておき、
pの中身が変わったときに、inputのvaleを変更するようにしてもいいかもしれません。
そして、yuki84webさんの言うとおり、関数が実行されてないですね。
0
こうするとわかりますが、ブラウザによって戻り値が違います。
javascript
1<input type="text" id="aaa" name="namae" size="20" maxlength="20"> 2<script> 3var aaa=document.getElementById("aaa"); 4aaa.innerHTML="こんにちは"; 5for(var i in aaa){ 6 if(i.match(/^inner/)) console.log(i+":"+aaa[i]); 7} 8</script> 9
- IE
innerHTMLもinnerTextも「こんにちは」が返る - Firefox
innerHTMLは「こんにちは」が返るが、innerTextは空 - chrome
innerHTMLもinnerTextも空
つまりinnerHTMLは書き換えられるが参照できたりできなかったりして
しかもそれがHTMLに反映されることはないということです
ちなみに
javascript
1console.log(aaa.firstChild);
すれば、どのブラウザでも「こんにちは」を得ることができます。
投稿2017/05/01 13:26
編集2017/05/01 13:32
総合スコア118392
あなたの回答
tips
プレビュー
