Связать значение текстового поля с динамическим div

Question

Я пытаюсь добавить значение innerhtml в текстовое поле/(Bind) в динамический div, который имеет разбиение на страницы. Когда я пытаюсь добавить с текстовым полем с div, я получаю сообщение об ошибке.

На моей начальной странице есть два элемента. Первый - это ни один из страниц, а другой - для ввода некоторого текста. Если я введу номер 2, то два div будут отображаться динамически. Затем я ввожу текст второго текстового поля приветствия. Текст должен появиться в первом div и для второго div, если я нажму кнопку в нижней части div, должен быть пустым. Использование чистого javascript (Vanila).

Я пытаюсь получить значение из текстового поля. Но я не смог связать с тэгом p, который был доступен динамически.

Пожалуйста, помогите мне.

var gettext_Title = document.getElementById('title_Text') 
var getresult = gettext_Title.value; 
//alert(result); 
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'); 
    hTitle = document.createElement('p'); 
    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]; 

    hTitle.setAttribute('id', ['Title' + (totalCount)]); 
    hTitle.className = "title_boundry"; 

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

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

    totalCount++; 
} 

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

} });

здесь является Jsfiddle Link

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

Пожалуйста, помогите мне

Приветствия,

Answer 1

Если я правильно то, что вы имеете в виду понять, попробуйте следующее:

основные. js:

(function() { 
    var inputTitle, 
     inputElement, 
     current, 
     totalCount = 0; 

    document.addEventListener('DOMContentLoaded', function (e) { 
     inputTitle = document.getElementById('title_Text'); 
     inputElement = document.getElementById("inputAdd_page"); 
     inputElement.addEventListener('blur', onInputElementBlur); 
     inputTitle.addEventListener('blur', onInputTitleBlur); 
    }); 

    function onInputTitleBlur(e) { 
     if (!!current) { 
      var title = current.querySelector('p'); 
      title.innerText = inputTitle.value; 
      inputTitle.value = ''; 
     } 
    } 

    function onInputElementBlur() { 
     var count = this.value; 
     // Gaurd condition 
     // Only if it is a number 
     if (count && !isNaN(count)) { 
      var fragment = document.createDocumentFragment(); 
      for (var j = 0; j < count; ++j) { 
       var spancount = document.createElement('span'); 
       var prevPage = document.createElement('div'); 
       var navbutton = document.createElement('button'); 
       var hTitle = document.createElement('p'); 
       var preview_PageSize = document.getElementById('page'); 
       var 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 + '"]'); 
        current = pageEl; 
        pageEl.style.zIndex = 10; 
       }); 

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

       hTitle.setAttribute('id', 'Title' + (totalCount)); 
       hTitle.className = "title_boundry"; 

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

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

       totalCount++; 
      } 

      current = document.querySelector('div[data-page="0"]'); 

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

index.html:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link id="myStyleSheet" href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<input type="text" class="form-control title_Textbox" id="title_Text" placeholder="Text"> 
<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> 
<script src="main.js" type="text/javascript"></script> 
</body> 
</html> 

style.css:

.div_navig { 
    background: lightGrey; 
    width: 24px; 
    height: 24px; 
    text-align: center; 
    margin-left: 5px; 
    color: black; 
    cursor: pointer; 
} 

.pagination_btn { 
    float: right; 
    margin: 0 20px 0 0; 
    padding-left: 5px; 
} 

.spanCount { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding: 0 10px 0 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; 
} 

.title_boundry { 
    border: 1px dotted #000; 
    height: 40px; 
}