html - How to use Javascript to populate a select form (i.e. dropdown) based on elements in a class -

i have html unknown number of elements of particular class.

for example:

the point of using lorem ipsum has more-or-less normal  <span ?class="star-pagination">*112</span> distribution of letters,  opposed using 'content here, content here', making readable  english. many desktop publishing packages , web page editors use  lorem ipsum default model text, , search 'lorem ipsum'  uncover <span class="star-pagination">*113</span> many web sites still  in infancy. 

upon page load, populate list such user can select number corresponds instance of .

end goal want list display associated page number (e.g. 112 or 113) rather instance number (e.g. 1, 2, 3). finally, event redirect user relevant instance (i.e. brought "page" have selected).

i have following script working checks number of elements in class "star-pagination." right writes variable indicate if file has elements star pagination.

 <script>  var x = document.getelementsbyclassname("star-pagination");  if (x.length < 1)       window.pagination = "unknown";  else      {          window.pagination = "known";      }  <script> 

problem 1) uniquely identifying each element, users can pushed element.

one approach have considered inserting unique id @ each element, upon clicking option populated list, event can triggered relies on "document.getelementbyid('mydiv').scrollintoview();"

 <script>      var x = document.getelementsbyclassname("star-pagination");      var i;      (var = 0; i< element.length; i++)           {                 x[i].setattribute("id", i);                      }  </script> 

however, not working. i'm bad @ javascript , must doing wrong in syntax. reasonable approach? if so, wrong syntax? there better approaches?

problem 2) populating select list incrementing 1 each element in x, starting @ first actual page number (e.g. 112) rather starting @ instance number (e.g. 1). best can tell there 2 steps this: (a) dynamically populating select form option units list , (b) retrieving first page number. imagine there regex based solution, not sure how working in javascript. rather hacking @ that, figured ask if had advice on best approach be?

you can populate dropdown appending option elements select element, using select element's add() method.

var select = document.getelementbyid("id_of_my_select_element"); var option = document.createelement("option"); option.value = "option value";  option.innerhtml = "option text"; select.add(option); 

you have idea adding unique identifier each of detected spans, it's practice use custom property data- prefix whenever you're adding property that's used own application. way don't have worry id naming collisions cause page html invalid (that is, if multiple elements on page somehow end same id).

for(var = 0; < x.length; i++){     x[i].setattribute("data-option",i); } 

here's example of working together:

var select = document.getelementbyid("dropdown");  var pages = document.queryselectorall(".star-pagination");  // loop through matching elements  (var = 0, len = pages.length; < len; i++) {    // give element custom property can retrieve    pages[i].setattribute("data-option", i);    // page number element    var text = pages[i].innerhtml;    var pagenumber = text.slice(1, text.length);    // add corresponding option select dropdown    var option = document.createelement("option");    option.value = i;    option.innerhtml = pagenumber;    select.add(option);  }  select.addeventlistener("change", function() {    var targetelement = document.queryselector("[data-option='" + this.value + "']");    targetelement.scrollintoview();  });

#output {    background-color: #dfdfdf;    color: darkred;    font-weight: bold;    border: 1px solid black;  }  .star-pagination {    color: blue;  }

<select id="dropdown">    <options>      <option>please choose page</option>    </options>  </select>  <div style="max-height:150px;overflow:scroll;">    <div id="text">the point of using lorem ipsum has more-or-less normal      <span class="star-pagination">*112</span> distribution of letters, opposed using 'content here, content here', making readable english. many desktop publishing packages , web page editors use lorem ipsum default model      text, , search 'lorem ipsum' uncover <span class="star-pagination">*113</span> many web sites still in infancy.</div>    <br/>    <br/><span class="star-pagination">*115</span>lorem ipsum dolor sit amet, consectetuer adipiscing elit. maecenas porttitor congue massa. fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.    <br/>    <br/><span class="star-pagination">*116</span>nunc viverra imperdiet enim. fusce est. vivamus tellus.    <br/>    <br/><span class="star-pagination">*117</span>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. proin pharetra nonummy pede. mauris et orci.    <br/>    <br/><span class="star-pagination">*118</span>lorem ipsum dolor sit amet, consectetuer adipiscing elit. maecenas porttitor congue massa. fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis    <br/>    <br/><span class="star-pagination">*119</span>nunc viverra imperdiet enim. fusce est. vivamus tellus.    <br/>    <br/><span class="star-pagination">*120</span>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. proin pharetra nonummy pede. mauris et orci.    <br/>    <br/><span class="star-pagination">*121</span>lorem ipsum dolor sit amet, consectetuer adipiscing elit. maecenas porttitor congue massa. fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis    <br/>    <br/><span class="star-pagination">*122</span>nunc viverra imperdiet enim. fusce est. vivamus tellus.    <br/>    <br/><span class="star-pagination">*123</span>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. proin pharetra nonummy pede. mauris et orci.    <br/>    <br/><span class="star-pagination">*124</span>lorem ipsum dolor sit amet, consectetuer adipiscing elit. maecenas porttitor congue massa. fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis    <br/>    <br/><span class="star-pagination">*125</span>nunc viverra imperdiet enim. fusce est. vivamus tellus.    <br/>    <br/><span class="star-pagination">*126</span>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. proin pharetra nonummy pede. mauris et orci.    <br/>    <br/><span class="star-pagination">*127</span>lorem ipsum dolor sit amet, consectetuer adipiscing elit. maecenas porttitor congue massa. fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis    <br/>    <br/><span class="star-pagination">*128</span>nunc viverra imperdiet enim. fusce est. vivamus tellus.</div>