How do I convert a string to object and use inside loop javascript?

Question

I have many divs with there IDs being in a simple order like: div1, div2, div3, div4 and so on. The HTML code is:

<div id='div1'>..abc..</div>
<div id='div2'>..def..</div>
<div id='div3'>..ghi..</div>
<div id='div4'>..jkl..</div>
<div id='div5'>..mno..</div>

They all contain different piece of text inside them. And now i want to sort the div in which the length of text inside is equal to 15. To do so i suppose there are two methods:

1. Separate Analysis
2. Looping

I used separate analysis js code:

<script>
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var div3 = document.getElementById('div3');
    var div4 = document.getElementById('div4');
    var div5 = document.getElementById('div5');
    if (div1.value.length = 50){
      alert('div 1 sorted');
    }
    //like this for all of them
</script>

I did like this for all five of them. till here it was fine but now i have to do this for suppose 100 div's so i tried using loop here:

<script>
    var i = 0;
    while (i <= 100){
      var allDiv = 'div' + i;
      if(allDiv.value.length == 50){
        alert(allDiv+' sorted')
      }
      i += 1;
    }
</script>

But this didn't work. I think when if function is taking allDiv.value as [div+i] here like div1. How to make it object? also please suggest any changes which i should make.

Answer 1

Use a for loop

In each iteration, get the div from the DOM

Check the value and length with innerText

Alert if your condition is met

 for (let i = 1; i < 6; i = i + 1) { const div = document.getElementById('div' + i); if (div && div.innerText.length === 15) { alert(`div ${i} has a length of 15`); } }

 <div id='div1'>aaaaa</div> <div id='div2'>bbbbb</div> <div id='div3'>ccccccccccccccc</div> <div id='div4'>ddddd</div> <div id='div5'>eeeee</div>

An even cleaner solution

if you want to do it in an easier way and you can change the HTML. I would add a class to each div in order to select them all at one go and loop through them. That way you also don't have to know how many divs are on the page immediately:

 const allDivs = document.querySelectorAll('.div-to-select'); allDivs.forEach(div => { if (div.innerText.length === 15) { alert(`div with id ${div.id} has length 15`); } });

 <div id='div1' class="div-to-select">aaaaa</div> <div id='div2' class="div-to-select">bbbbb</div> <div id='div3' class="div-to-select">ccccccccccccccc</div> <div id='div4' class="div-to-select">ddddd</div> <div id='div5' class="div-to-select">eeeee</div>

Answer 2

Try this out.

<script>
    var i = 0;
    while (i <= 100){
      var allDiv = 'div' + i;
      if(document.getElementById(allDiv).innerHTML.length == 50){
        alert(allDiv+' sorted')
      }
      i += 1;
    }
</script>

Btw this is not valid expression, It's an assignment.

 if (div1.value.length = 50){
      alert('div 1 sorted');
 }

Correct

if (div1.value.length == 50){
      alert('div 1 sorted');
 }

Go through this for better understanding: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

The sorting and question does not seem to be logically correct tho.

Answer 3

Use loops, here is an example

let i = 1;
for (i < 6; i +=  1) {
  const d = document.getElementById(``div + ${i}``);

  if (d && d.innerText.length === 15) {
    console.log(`division ${i} length is 15`);
  }
}