如何使用 JavaScript 選擇“this”元素

Question

在這個帶有id=textList的父 div 中，我有多個文本框，每次它們生成多個具有相同class=txt的數字。 我想獲取一個用戶點擊的框的值； 基本上我想選擇當前點擊的文本框。

<div id="textList">
    <input type="text" class="txt" value="">
    <input type="text" class="txt" value="">
    <input type="text" class="txt" value="">
    <input type="text" class="txt" value="">
</div>

Answer 1

附加任何事件，如keydown或click並使用this來訪問元素以獲取值。

這是綁定事件的示例，

var inputs = document.getElementsByClassName('txt');

for(var i = 0; i<inputs.length; i++){
  inputs[i].addEventListener("keyup", function(){
    console.log(this.value)
  }, false);
}

演示：

 var inputs = document.getElementsByClassName('txt'); for(var i = 0; i<inputs.length; i++){ inputs[i].addEventListener("keyup", function(){ console.log(this.value) }, false); }

 <div id="textList"> <input type="text" class="txt" value=""> <input type="text" class="txt" value=""> <input type="text" class="txt" value=""> <input type="text" class="txt" value=""> </div>

Answer 2

首先，您需要按類獲取所有元素。 接下來，您需要為每個元素添加一個單擊偵聽器。 使用單擊偵聽器的事件參數 ( event.srcElement.value ) 或通過this.value您可以訪問元素

<div id="textList">
    <input type="text" class="txt" value="1">
    <input type="text" class="txt" value="2">
    <input type="text" class="txt" value="3">
    <input type="text" class="txt" value="4">
</div>

和 JavaScript：

var inputElements = document.querySelectorAll(".txt");

for (var i = 0; i < inputElements.length; i++) {
    inputElements[i].addEventListener('click', function(event) {
        console.log(this.value);
    });
}

小提琴： https ://jsfiddle.net/ar1wzLva/