将文本框值与动态 div 绑定

Question

我试图将/（绑定）文本框Innerhtml值附加到具有分页的动态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链接

预先感谢

请帮助我

欢呼，

Answer 1

如果我正确理解您的意思，请尝试以下操作：

main.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;
}