使用 onclick 从输入中获取价值答案

【问题标题】：Get value from input with onclick使用 onclick 从输入中获取价值
【发布时间】：2017-02-11 15:12:43
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript

【解决方案1】：

在你的函数调用中使用 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>

【讨论】：

现在已弃用

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

您需要将元素的引用传递给函数getValue( this ) 然后用作function getValue( self ){ /*self.stuff*/ } 或者您也可以通过添加点击监听器来做到这一点。

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

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

【讨论】：