【javascript】入力したデータを複数の箇所に反映(挿入)する
textareaに打ち込んだデータを他の箇所(タグ内)に反映(挿入)する方法です。
○javascript
<script>
function Textput(tovalue,forclass){/*←Textput([挿入するデータ],[対象のclass名])*/
var targetclassarray = document.getElementsByClassName(forclass);
for(var i=0;i<targetclassarray.length; i++){
targetclassarray[i].innerHTML = tovalue;/*←対象に値を挿入*/
}
}
</script>
○HTML
<!-- ↓入力エリア キーが押されるたびにTextput関数を呼んで全ての対象に入力しているデータを挿入する-->
<textarea id="ToArea" onkeyup="Textput(this.value,'PutArea');" value=""></textarea>
<hr />
<!-- ↓対象エリア1 -->
divエリア1<br />
<div class="PutArea">
</div>
<hr />
<!-- ↓対象エリア2 -->
divエリア2<br />
<div class="PutArea">
</div>
入力されたデータと対象のclassをonkeyupで関数に渡します。
関数Textputで対象を取得(
NodeList型 )してループ処理で反映します。
リアルタイムで複数箇所に反映が出来ます。
つまづいたのはclassを取得する時は
NodeList型 になっているというところです。
よってfor文を使って全ての対象に反映する処理が入ります。