Stuart Brian Stuart Brian - 1 month ago 6
HTML Question

Javascript to replace element by id using for loop

Am using markdown converter javascript to convert text in user reply area, but it only get the last text from another users and place it at the top i don't know what i did wrong.



<script>
var inputs = document.getElementsByClassName("RepIcer");
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", "replysjl");
var targetSpan = document.getElementById( targetId );
targetSpan.innerHTML = MarkDownPreviewHtml;
var a = 10;
}//for()

</script>

<p id="reply-0"></p>
<textarea id="replybefore-0" style="display:none;" class="RepIcer">Hello how are you</textarea>

<p id="reply-5"></p>
<textarea id="replybefore-5" style="display:none;" class="RepIcer">HHHH okay</textarea>

<p id="reply-6"></p>
<textarea id="replybefore-6" style="display:none;" class="RepIcer">Whuyyyy</textarea>

<p id="reply-10"></p>
<textarea id="replybefore-10" style="display:none;" class="RepIcer">Not working</textarea>





Example of my html

<p id="reply-0"></p>
<textarea id="replybefore-0" style="display:none;" class="RepIcer">Hello how are you</textarea>

<p id="reply-5"></p>
<textarea id="replybefore-5" style="display:none;" class="RepIcer">HHHH okay</textarea>

<p id="reply-6"></p>
<textarea id="replybefore-6" style="display:none;" class="RepIcer">Whuyyyy</textarea>

<p id="reply-10"></p>
<textarea id="replybefore-10" style="display:none;" class="RepIcer">Not working</textarea>


Why i have mix up the
p
and
textarea
element id is based on time the reply is inserted in the database the id of reply message from db is what i use in
reply-XX and replybefore-XX
if this is another way i can do it to add fake id like '`12345...' till last reply i will like it

Than here is my javascript to get text inside textarea and display in in p element according to the id of each element



<script>
var inputs = document.getElementsByClassName("RepIcer");
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", "replyList");
var targetSpan = document.getElementById( targetId );
targetSpan.innerHTML = MarkDownPreviewHtml;
var a = 10;
}
</script>




Answer

Here is a jsFiddle version without Markdown, but you could elaborate from there.

Your targetId replace was not replacing properly, see below for code that works:

var inputs = document.getElementsByClassName("RepIcer");

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

}