Question

你好互联网的人，我有一组按钮，如果点击一个按钮，它的内容应该附加到文本字段的内容中。

让我说我有三个按钮：[第一] [第二] [第三] 我的addEventListener实现导致＆＃34;第三＆＃34;无论我按哪个按钮，都会附加到文本字段的内容中。我不太了解这个问题。

function setupListeners() {
    var targetInputField = d.querySelector("#expression");
    var t = d.querySelectorAll(".expression-button").length;
    for (var i = 1; i <= t; i++) {
        var btnElem = d.querySelector("#expression-button-"+i);
        btnElem.addEventListener('click', function() {
            if (targetInputField.value == "") {
                targetInputField.value = btnElemLocal.innerText;
            }
            else {
                targetInputField.value += ";"+btnElemLocal.innerText;
            }
        });
    }
}

我想要的是什么：

如果我连续点击所有三个按钮，则文本字段的内容应为：

＆＃34;第一，第二，第三＆＃34;

而不是：

＆＃34;第三;第三;第三＆＃34;

Answer 1

将click事件代码放在另一个函数（我的示例中为btnClick）中，只需在循环中的.addEventListener()中附加事件时调用它，然后使用this来引用当前点击的元素：

function btnClick() {
  var targetInputField = d.querySelector("#expression");

  if (targetInputField.value == "") {
    targetInputField.value = this.innerText;
  }
  else {
    targetInputField.value += ";"+this.innerText;
  }
}

希望这有帮助。

var d = document;

function setupListeners() {      
  var t = d.querySelectorAll(".expression-button").length;

  for (var i = 1; i <= t; i++) {
    var btnElem = d.querySelector("#expression-button-"+i);
    
    btnElem.addEventListener('click', btnClick);
  }
}

function btnClick() {
  var targetInputField = d.querySelector("#expression");
  
  if (targetInputField.value == "") {
    targetInputField.value = this.innerText;
  }
  else {
    targetInputField.value += ";"+this.innerText;
  }
}

setupListeners();

<button class='expression-button' id='expression-button-1'>First</button>
<button class='expression-button' id='expression-button-2'>Second</button>
<button class='expression-button' id='expression-button-3'>Third</button>

<input id='expression' />

将不同的事件侦听器添加到循环

1 个答案: