Question

如何使用vanilla javascript获取点击输入的值？

＆＃13;

function getvalue() {
  console.log(this.val);
}

＆＃13;

<input type="text" onclick="getvalue()" value="asdf"></input>
<input type="text" onclick="getvalue()" value="asdf2"></input>
<input type="text" onclick="getvalue()" value="asdf3"></input>

＆＃13;

Answer 1

＆＃13;

function getvalue(t) {
   console.log(t.value);
}

＆＃13;

<input onclick="getvalue(this)" value="asdf"></input>
<input onclick="getvalue(this)" value="asdf2"></input>

＆＃13;

Answer 2

使用vanilla javascript，您可以这样做：

＆＃13;

function getValue(o) {
  console.log(o.value);
}

＆＃13;

<input value="asdf" onclick="getValue(this)"></input>
<input value="asdf2" onclick="getValue(this)"></input>
<input value="asdf3" onclick="getValue(this)"></input>

＆＃13;

Answer 3

在函数调用中使用event.target.value

调用函数时event将对象传递给函数。 event.target标识称为函数的元素。

function getvalue() {
   console.log(event.target.value);
}

<input type="text" onclick="getvalue()" value="asdf"></input>
<input type="text" onclick="getvalue()" value="asdf2"></input>
<input type="text" onclick="getvalue()" value="asdf3"></input>

Answer 4

您需要将元素的引用传递给函数getValue( this ) 然后用作function getValue( self ){ /*self.stuff*/ } 要么您也可以通过添加单击侦听器来完成此操作。

＆＃13;

window.onload = function(){
elms = document.getElementsByClassName('element');
   
  for( var i = 0; i < elms.length; i++){ 
    elms[ i ].addEventListener( 'click', function(){
        console.log( this.value );
     })
  }
  
}

＆＃13;

<input class="element" value="asdf" />
<input class="element" value="asdf2" />
<input class="element" value="asdf3" />

＆＃13;

通过onclick从输入中获取价值

4 个答案: