Question

需要一些指导。我正在尝试使用getAttribute将值从href传递到input值并且工作正常，但如果我使用了多个a标记，则只会显示href属性对于第一个。

请检查代码段，

function myFunction(event) { 
    document.getElementById("demo").value = document.getElementsByTagName("a")[0].getAttribute('href');
}

<a href="#2" onclick="myFunction(event)">test1</a>

<a href="#3" onclick="myFunction(event)">test2</a>

<input id="demo"></input>

Answer 1

您的问题如下：

// That line is returning always the first <a> element, so you're getting always '#2'.
document.getElementsByTagName("a")[0];

您可以在Element.getElementsByTagName()

了解更多信息

您可以将元素直接传递给函数myFunction。

查看此代码段：

function myFunction(caller) {
  document.getElementById("demo").value = caller.getAttribute('href');
}

<a href="#2" onclick="myFunction(this); event.target">test1</a>

<a href="#3" onclick="myFunction(this); event.target">test2</a>

<input id="demo"></input>

请参阅，现在输入正在获得正确的href值。

Answer 2

动态地，你可以做同样的事情，

var a = document.querySelectorAll("a");

for (var i in a) {
  a[i].onclick = function() {
     document.getElementById("demo").value = this.getAttribute("href");
  };
}

<a href="#1" >test1</a>
<a href="#2" >test2</a>

<input id="demo" />

如何将值从href传递给输入

2 个答案: