Question

需要帮助制作一个简单的文本编辑器：
文字显示在屏幕上
单击文本进行更改
点击更改按钮以查看更改

但是程序会无限循环

grouper()

我的主要HTML是

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');

预期：在javascript的最后一行中，标头标签已附加到div 其中具有textContent'initialValue'。
单击后：
应显示一个文本字段和更改按钮，
单击更改时，新值必须显示为标题！

实际：程序陷入无限循环！

Answer 1

在添加事件侦听器时，您正在调用实际函数，而不是应该只绑定修改后的代码在下面的事件

 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);

    }

Answer 2

当前，addEventListener click方法直接在屏幕加载时执行。由于此执行将进行无限循环。为避免这种情况，请绑定以下方法

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));
}
};

使用基本的HTML和JS解决简单文本字段值更改器中的问题

2 个答案: