javascript - 多次调用Javascript函数

Question

我有一个简单的 JavaScript 函数：

function f1()
{
    alert("HI");
}

我从两个地方调用相同的 Javascript 函数，比如：

<input type="submit" id="btn1" onclick="f1()"/>

<input type="submit" id="btn2" onclick="f1()"/>

如何找到调用这个函数的目标元素？

编辑：如何检查元素是按钮还是其他元素？

Answer 1

HTML

<input type="submit" id="btn1" onclick="f1(this)"/>
<input type="submit" id="btn2" onclick="f1(this)"/>

JS

function f1(el) {
    console.log(el)
}

演示：小提琴

Answer 2

function f1(element)
{
    alert($(element).attr("id"));

    if ($(element).is(":button")) {
        alert("Im button");
    }
}

<input type="submit" id="btn2" onclick="f1(this)"/>

Answer 3

试试这个

<input type="submit" id="btn1" onclick="f1(this)"/>
<input type="submit" id="btn2" onclick="f1(this)"/>

和控制台一样

function f1(comp)
{
    console.log(comp);
}

Answer 4

如果您已经在您的页面上使用 jquery，也许您应该尝试提供您想要针对共享类的所有元素，然后检测点击？

<input class="same_kind_buttons" type="submit" id="btn1" />
<input class="same_kind_buttons" type="button" id="btn2" />


<script> 
$(".same_kind_buttons").click(function() {
  console.log($(this).attr("type")); 
  console.log(this.id);
});
</script>

当然，如果您不在页面上使用 jquery，则不应仅将其包含在该功能中，您可以使用：

<input type="submit" id="btn1" onclick="f1(this);"/>
<input type="submit" id="btn2" onclick="f1(this);" />

<script>
  function f1(elem) {
    console.log(elem.tagName);
    console.log(elem.id);
  }
</script>

Answer 5

添加this到函数调用

<input type="submit" id="btn1" onclick="f1(this)"/>

<input type="submit" id="btn2" onclick="f1(this)"/>

并将您的 js 修改为

function f1(el)
{
    alert(el.nodeName) ; // alerts type of HTML element
}

el将包含对元素的引用

编辑：添加代码来检测 HTML 元素的类型

Answer 6

最简单的方法：

<input type="submit" id="btn1" onclick="f1(this)"/>

<input type="submit" id="btn2" onclick="f1(this)"/>

JS：

function f1(btn)
{
    alert("Hi from " + btn);
}