Loop through html content using the ids in javascript

Question

I am trying to loop through html content, for each html has a text input which i want to get the text value and pass it to the html span that also has id replyJail-number of the same with id of replybefore-number

HTML PART

<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;
}

getElementById--(Not getElementsById as itdoes not exist in JavaScript) returns only single element not collection...You have perfect markup to use getElementsByClassName/querySelectorAll — Rayon
– Rayon, Commented Jul 26, 2016 at 14:27
var x = document.getElementsById(id); is wrong, the right way var x = document.getElementById(id); — ysurilov
– ysurilov, Commented Jul 26, 2016 at 14:28
@Rayon: getElementsById isn't a function. It's getElementById - no "s". — gen_Eric
– gen_Eric, Commented Jul 26, 2016 at 14:30
var n = i++; increments i an exrta time too (so your loop increments in 2s), you should probably use n = i + 1 — Pete
– Pete, Commented Jul 26, 2016 at 14:34

Mohit Bhardwaj · Accepted Answer · 2016-07-26 15:34:28Z

1

You can get all input elements using getElementsByClassName. Now, iterate through each input and get the corresponding span's id by replacing "before" with "Jail". You can now insert the corresponding input's value in the target span as 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`"/>

edited Jul 26, 2016 at 15:34

answered Jul 26, 2016 at 14:33

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Over a year ago

how am i going to include this var converter1 = Markdown.getSanitizingConverter(); var CODESOFTLAB = new Markdown.Converter(converter1); it is my markdown converter it worked but doesn't convert any more

Mohit Bhardwaj Over a year ago

@Alex I have updated the code to include markdown converter code from your sample code.

Alex Over a year ago

Bahit what is the different between innerHTML and textContent i this i printing the html content inside the text value as text instead of html can you change that?

Mohit Bhardwaj Over a year ago

@Alex updated the code. Please check if that is what works for you.

Collectives™ on Stack Overflow

Loop through html content using the ids in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related