innerHTMLでテキストボックスに入力された文字を表示しようと function sample1(){ var tx1 = document.getElementById("txt1").value; document.getElementById("area1").innerText = tx1; } function sample2(){ var tx2 = document.getElementById("txt2").value; document.getElementById("area2").innerText = tx2; } function sample3(){ var tx3 = document.getElementById("txt3").value; document.getElementById("area3").innerText = tx3; } function sample4(){ var tx4 = document.getElementById("txt4").value; document.getElementById("area4").innerText = tx4; } function sample5(){ var tx5 = document.getElementById("txt5").value; document.getElementById("area5").innerText = tx5; } document.writeln(" "); document.writeln(" "); document.writeln(" "); document.writeln(" "); document.writeln(" "); と書いたのですが同じコードを５回コピペする形なのでforでまとめたいのですがどうすればいいでしょうか？教えていただきたいです。

for (let i = 0; i < 5; i++) { }でのまとめ方について

解決済

質問者：マイマイカブリ
質問日時：2020/03/09 13:04
回答数：1件

innerHTMLでテキストボックスに入力された文字を表示しようと
<script>
function sample1(){
var tx1 = document.getElementById("txt1").value;
document.getElementById("area1").innerText = tx1;
}
</script>
<script>
function sample2(){
var tx2 = document.getElementById("txt2").value;
document.getElementById("area2").innerText = tx2;
}
</script>
<script>
function sample3(){
var tx3 = document.getElementById("txt3").value;
document.getElementById("area3").innerText = tx3;
}
</script>
<script>
function sample4(){
var tx4 = document.getElementById("txt4").value;
document.getElementById("area4").innerText = tx4;
}
</script>
<script>
function sample5(){
var tx5 = document.getElementById("txt5").value;
document.getElementById("area5").innerText = tx5;
}
</script>
<input type="text" id="txt1" value="" style="width:10%;margin:5px;"><input type="text" id="txt2" value="" style="width:10%;margin:5px;"><input type="text" id="txt3" value="" style="width:10%;margin:5px;"><input type="text" id="txt4" value="" style="width:10%;margin:5px;"><input type="text" id="txt5" value="" style="width:10%;margin:5px;">
<br>
<input type="button" value=" 1変更↓ " onclick="sample1();" style="width:10%;margin:5px;"><input type="button" value=" 2変更↓ " onclick="sample2();" style="width:10%;margin:5px;"><input type="button" value=" 3変更↓ " onclick="sample3();" style="width:10%;margin:5px;"><input type="button" value=" 4変更↓ " onclick="sample4();" style="width:10%;margin:5px;"><input type="button" value=" 5変更↓ " onclick="sample5();" style="width:10%;margin:5px;">
<script>
document.writeln(" <div id=\"area1\" class=\"result\" style=\"margin:5px;\"> </div> ");
document.writeln(" <div id=\"area2\" class=\"result\" style=\"margin:5px;\"> </div> ");
document.writeln(" <div id=\"area3\" class=\"result\" style=\"margin:5px;\"> </div> ");
document.writeln(" <div id=\"area4\" class=\"result\" style=\"margin:5px;\"> </div> ");
document.writeln(" <div id=\"area5\" class=\"result\" style=\"margin:5px;\"> </div> ");
</script>
と書いたのですが同じコードを５回コピペする形なのでforでまとめたいのですがどうすればいいでしょうか？教えていただきたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2020/03/10 10:09

こんにちは

回答がないようなので・・・

というよりも、
＞forでまとめたいのですが～～
までわかっているなら、構文さえ調べれば、もうできたようなものだと思いますが…？
https://developer.mozilla.org/ja/docs/Web/JavaSc …

例が欲しいというのであれば、例えば、ご提示の「document.writeln」の塊の部分で考えてみれば
for(let i=1; i<=5; i++){
document.writeln(`<div id="area${i}" class="result" style="margin:5px;"></div>`);
}
みたいな要領でしょうか。

ざっと見て、ご提示のサンプルはHTMLにも繰返しが多いので、そちらも含めて繰返しで処理する例を以下に挙げておきます。
記述方法や仕組みはいろいろ考えられると思いますので、決して例示が唯一というわけではありません。
また、当面の処理には不要な個々のidやクラス、及び、HTML内のstyle設定は削除しました。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#texts input, #buttons input { box-sizing:border-box; width:10vw; margin:5px; }
#areas div { margin:5px; }
</style>
</head>
<body>

<div id="texts"></div>
<div id="buttons"></div>
<div id="areas"></div>

<script type="text/javascript">
//繰り返しの回数
const setNo = 5;

//関数定義
let addElm = (sel, str)=>{document.getElementById(sel).insertAdjacentHTML('beforeend', str);}

//DOM追加
for(let i=1; i<=setNo; i++){
addElm('texts','<input type="text" value="" />');
addElm('buttons',`<input type="button" value="${i}変更↓" />` );
addElm('areas', '<div class="result"></div>');
}

//イベント処理
document.getElementById('buttons').addEventListener('click', (e)=>{
let t = e.target;
if(t.nodeName == "INPUT" && t.type == "button"){
let n = Array.prototype.indexOf.call(document.querySelectorAll('#buttons>input'),t);
let v = document.querySelectorAll('#texts>input')[n].value;
document.querySelectorAll('#areas>div')[n].innerHTML = v;
}
});
</script>
</body>
</html>