Динамическая карта с помощью div

Question

Я хочу связать кнопку с div динамически, используя id, например.

У меня есть две кнопки и два div, которые были динамически созданы, если я нажимаю вторую кнопку, она должна перейти во второй div, если я нажму первую кнопку, чтобы первая кнопка была видимой. Использование чистого ванильного 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); 
    } 
}); 

Вот скрипка Link

Пожалуйста, помогите мне, на самом деле я пытаюсь я не получаю его

Заранее спасибо

Answer 1

я бы предложил не использовать частичный идентификатор или что-нибудь подобное чтобы связать ваши элементы. Вместо этого используйте атрибут, специально созданный для этой цели. В следующем коде я использую атрибут с именем data-page, который просто устанавливается на значение, которое вы добавляете к идентификаторам. Я также добавил обработчик событий, который просто устанавливает Z-индекс всех страниц 0, затем устанавливает Z-индекс выбранной страницы на 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>