如何传递链接锚文本

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”放入“textfield”中表格。 我相信你可以用 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" />