如何传递链接锚文本

Question

我是 Javascript 新手，我问了几个 Javascript 朋友，他们似乎没有答案。我一直在用 PHP 开发一个简单的搜索查询，它会输出几个结果，例如：

<a href="#" onclick="injectForm(this);">Result Text Here</a>
<a href="#" onclick="injectForm(this);">Result Text 2 Here</a>
<a href="#" onclick="injectForm(this);">Result Text 3 Here</a>


<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield" />Search
</form>

injectForm() 的伪代码；

• 获取刚刚点击的链接的.value
• 将其传递给变量，即 result = (something something).value
• 设置 form1.textfield.value = 结果

我想做的是有一个简单的 injectForm() 函数，它读取结果“Anchor Text Here”的值，所以当有人点击它时 - 它会将值“Result Text Here”放到“文本字段”在表单中。我相信你可以用 DOM 做到这一点——我不想使用任何 JS 库，比如 Jquery。

有人有想法吗？如果我为每个 href 使用不同的 DIV 或 SPAN 标签，您可以使用 DOM - 如果可能，我希望不必用不同的 div 或类对每个结果进行编号 - 只需阅读相对 this();有点像。

Answer 1

很简单

document.getElementById("injectDiv").addEventListener("click", function(e) {
  tgt = e.target;
  if (tgt.classList.contains("inject")) {
    e.preventDefault(); // cancel link
    document.getElementById("textfield").value = tgt.innerHTML;
  }
})

<div id="injectDiv">
  <a href="#" class="inject">Result Text 1 Here</a><br/>
  <a href="#" class="inject">Result Text 2 Here</a><br/>
  <a href="#" class="inject">Result Text 3 Here</a><br/></div>
<input type="text" id="textfield" />

旧的内联版本

function injectForm(theLink) {
  document.getElementById("textfield").value = theLink.innerHTML;
  return false; // cancel the click
}

<a href="#" onclick="return injectForm(this);">Result Text 1 Here</a><br/>
<a href="#" onclick="return injectForm(this);">Result Text 2 Here</a><br/>
<a href="#" onclick="return injectForm(this);">Result Text 3 Here</a>
<br/>
<input type="text" id="textfield" />