Dynamically map button with div

Question

I want to link a button with div dynamically using id’s for example.

I have two buttons and two div this is been dynamically created if i click the second button it has to go second div if i click first button it first button has to visible. Using pure vanila javascript.

    var inputElement = document.getElementById("inputAdd_page");
    var totalCount = 0;
    inputElement.addEventListener('blur', function() {
    var count = this.value;
    if(count && !isNaN(count)) {
      fragment = document.createDocumentFragment();
         for (var j = 0; j < count; ++j) {
        spancount = document.createElement('span');
        prevPage = document.createElement('div');
        navbutton = document.createElement('button');
        preview_PageSize = document.getElementById('page');
          navpageBtn = document.getElementById('pageBtn');


        navbutton.className = "div_navig";
        navbutton.setAttribute('id', ['pag_navg' + totalCount]);
        navbutton.innerHTML=[1 + totalCount];

        spancount.className = "spanCount";
        spancount.innerHTML=[1 + totalCount];

        prevPage.className = "preview_windowSize_element";
        prevPage.setAttribute('id', ['page' + (totalCount)]);
        prevPage.appendChild(spancount);
        navpageBtn.appendChild(navbutton);

        prevPage.setAttribute('id', ['page' + (totalCount)]);         
        preview_PageSize.childNodes[0]); 
        totalCount++;
    }
    inputElement.value="";
    document.body.appendChild(fragment);
  }
});

Here is the fiddle Link

Kindly help me actually I am trying I am not getting it

Thanks in advance

Answer 1

I would suggest not using a partial id or anything like that to link your elements. Instead, use an attribute specifically created for the purpose. In the following code, I'm using an attribute named data-page which is simply set to the value you're appending to the ids. I also added an event handler which just sets the z-index of all pages to 0, then sets the selected page's z-index to 10.

//create div
var inputElement = document.getElementById("inputAdd_page");
var totalCount = 0;
inputElement.addEventListener('blur', function() {
  var count = this.value;
  // Gaurd condition
  // Only if it is a number
  if (count && !isNaN(count)) {
    fragment = document.createDocumentFragment();
    for (var j = 0; j < count; ++j) {
      spancount = document.createElement('span');
      prevPage = document.createElement('div');
      navbutton = document.createElement('button');
      preview_PageSize = document.getElementById('page');
      navpageBtn = document.getElementById('pageBtn');

      navbutton.className = "div_navig";
      navbutton.setAttribute('id', ['pag_navg' + totalCount]);
      navbutton.setAttribute('data-page', totalCount);
      navbutton.innerHTML = [1 + totalCount];
      navbutton.addEventListener('click', function (e) {
        var el = e.target;
        var page = parseInt(el.getAttribute('data-page'), 10);
        var allPages = document.querySelectorAll('.preview_windowSize_element');
        Array.prototype.forEach.call(allPages, function (pageElement) {
          pageElement.style.zIndex = 0;
          });
        var pageEl = document.querySelector('div[data-page="' + page + '"]');
        pageEl.style.zIndex = 10;
        });

      spancount.className = "spanCount";
      spancount.innerHTML = [1 + totalCount];

      prevPage.className = "preview_windowSize_element";
      prevPage.setAttribute('id', ['page' + (totalCount)]);
      prevPage.setAttribute('data-page', totalCount);
      prevPage.appendChild(spancount);
      navpageBtn.appendChild(navbutton);

      preview_PageSize.insertBefore(prevPage, preview_PageSize.childNodes[0]);

      totalCount++;
    }

    inputElement.value = "";
    document.body.appendChild(fragment);
  }
});

.title_Textbox {
  border: 1px solid rgb(152, 152, 152);
  width: 230px;
  padding: 5px 0 5px 5px;
}
.preview_windowSize {
  margin: 15px 15px 15px 15px;
  height: 300px;
  padding: 5px;
}
.preview_windowSize_element {
  position: absolute;
  background-color: lightGrey;
  border: 1px solid rgb(155, 155, 155);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 5px;
  width: 93.5%;
  height: 300px;
}

<input type="text" class="form-control title_Textbox" id="inputAdd_page" placeholder="No Of Pages">
<div class="preview_windowSize" id="page">

</div>
<div id="pageBtn" class="row pagination_btn">

</div>