JavaScriptのIDを使用してループするHTMLコンテンツ

Question

私は、各HTMLがテキスト値を取得し、それをHTMLのスパンに渡したいテキスト入力を持っているため、HTMLコンテンツをループしようとしています。idはreplyJail-numberです。 replybefore-number

HTMLパートのID

<span id="replyJail-1" class="rep"></span> 
<input id="replybefore-1" class="brp" type="hidden" value="hello"/> 

<span id="replyJail-2" class="rep"></span> 
<input id="replybefore-2" class="brp" type="hidden" value="#Bold letter"/> 

<span id="replyJail-3" class="rep"></span> 
<input id="replybefore-3" class="brp" type="hidden" value="`My code`"/> 

Javascriptを

var x = document.getElementsById(id); 
//x[i] 
var i; 
for (i = 0; i < x.length; i++) { 
    var n = i++; 
    var converter1 = Markdown.getSanitizingConverter(); 
    var CODESOFTLAB = new Markdown.Converter(converter1); 
    var before = document.getElementById("replybefore"+n).value; 
    var MarckDowPreviewHtml = CODESOFTLAB.makeHtml(before); 
    document.getElementById("replyJail"+n).innerHTML = MarckDowPreviewHtml; 
    var a = 10; 
} 

と同じ

Answer 1

getElementsByClassNameを使用してすべての入力要素を取得できます。今度は、各inputを繰り返し、「前」を「刑務所」に置き換えて、対応するスパンのIDを取得します。対応する入力の値をtextContentというようにターゲットスパンに挿入できるようになりました。

var inputs = document.getElementsByClassName("brp"); 
var converter1 = Markdown.getSanitizingConverter(); 
var CODESOFTLAB = new Markdown.Converter(converter1); 

for(var i = 0; i < inputs.length; i++) 
{ 
    var input = inputs[i]; 
    var value = input.value; 
    var MarkDownPreviewHtml = CODESOFTLAB.makeHtml(value); 
    var targetId = input.id.replace("before", "Jail"); 
    var targetSpan = document.getElementById(targetId); 
    // targetSpan.textContent = MarkDownPreviewHtml; 
    targetSpan.innerHTML = MarkDownPreviewHtml; 
}//for() 


<span id="replyJail-1" class="rep"></span> 
<input id="replybefore-1" class="brp" type="hidden" value="hello"/> 

<span id="replyJail-2" class="rep"></span> 
<input id="replybefore-2" class="brp" type="hidden" value="#Bold letter"/> 

<span id="replyJail-3" class="rep"></span> 
<input id="replybefore-3" class="brp" type="hidden" value="`My code`"/>