Исправление проблемы в простом преобразователе значений текстового поля с использованием базового HTML и JS - PullRequest
Новая
       22

Исправление проблемы в простом преобразователе значений текстового поля с использованием базового HTML и JS

0 голосов
/ 03 апреля 2019

Нужна помощь в создании простого текстового редактора:
Текст отображается на экране
Нажмите на текст, чтобы изменить его
Нажмите кнопку изменения, чтобы увидеть изменения

но программа идет бесконечно долго 

var creators = {
hTag :function(textToInput){
  var h1 = document.createElement('h1');
  var div  = document.getElementById('main');
  div.innerHTML = '';
  h1.id = 'userText';
  h1.textContent = textToInput;
  div.appendChild(h1);
  console.log(div);
  listeners.hTagListener();
  //document.querySelector('h1');
  //hTag.addEventListener('click',this.);
},
changeField :function(){
  var input = document.createElement('input');
  var button = document.createElement('button');
  var div = document.getElementById('main');
  div.innerHTML='';
  button.id = 'changeButton';
  button.textContent = 'Change';
  input.id = 'input';
  input.type = 'text';
  div.appendChild(button);
  div.appendChild(input);
  listeners.changeButtonListener();

}
};

var listeners = {
hTagListener : function(){
  var h1Print = document.querySelector('h1');
  h1Print.addEventListener('click',creators.changeField());
  console.log('added event listener');
},
changeButtonListener : function(){
var but = document.getElementById('changeButton');
  var inputText = document.getElementById('input');
  console.log(inputText.value);
but.addEventListener('click',creators.hTag(inputText.value));}
};

creators.hTag('initialValue');

и мой основной HTML-код 

 <body>
    <br>
    <br>
    <div id="main">
    </div>
 <script src="/script.js" defer></script>

Ожидается: В последней строке javascript тег заголовка добавляется к div у которого есть textContent 'initialValue'.
После нажатия на него:
Текстовое поле и кнопка изменения должны появиться,
при нажатии на кнопку изменения, новое значение должно отображаться как заголовок!

Фактически: Программа идет по бесконечному циклу!

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

В настоящее время методы нажатия addEventListener непосредственно выполняют загрузку экрана. Благодаря этому исполнение идет по бесконечному циклу. Чтобы избежать этого, свяжите метод, как показано ниже 

var listeners = {
hTagListener : function(){
  var h1Print = document.querySelector('h1');
  h1Print.addEventListener('click',creators.changeField.bind(this), false);
  console.log('added event listener');
},
changeButtonListener : function(){
  var but = document.getElementById('changeButton');
  var inputText = document.getElementById('input');
  console.log(inputText.value);
but.addEventListener('click',creators.hTag.bind(this, inputText.value));
}
};
0 голосов
/ 03 апреля 2019

При добавлении прослушивателя событий вы вызываете реальную функцию, а не просто привязываете событие к измененному коду ниже 

 var listeners = {
    hTagListener : function(){
      var h1Print = document.querySelector('h1');
      h1Print.addEventListener('click',creators.changeField);
      console.log('added event listener');
    },
    changeButtonListener : function(){
    var but = document.getElementById('changeButton');
      var inputText = document.getElementById('input');
    but.addEventListener('click',function(){creators.hTag(inputText.value)},false);

    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...