document.getElementById onclick 每次页面加载仅工作一次

Question

我有一个链接：

<a id="lnk" href="${pageContext.request.contextPath}/path/path2.pdf?var0=sometext&var1=moretext" onclick="update();"target="_blank">click to export</a>

和一个单独文件中的 JavaScript 函数：

function update()
{
    var link = document.getElementById("lnk");
    link.href += "&var2=" + document.getElementById("textareaIdName").value;
    return;
}

这应该从 jsp 表单中的文本区域框中获取文本，以传递到控制器中进行输出。它在我第一次单击链接时起作用，但是如果我更改框中的文本并再次单击链接，则从第一次单击每个其他链接单击开始，它都会保持相同的值，直到我重新加载页面，无论我在中更改什么文本框。该链接返回文件下载。

如何在不重新加载页面的情况下不断从文本区域获取新文本？

Answer 1

发生这种情况是因为每次按下链接时您都使用 += ，这将继续将 var2 连接到超链接的末尾，为了使这项工作有效，您应该使用：

var linkName = "${pageContext.request.contextPath}/path/path2.pdf?var0=sometext&var1=moretext";

function update(obj) {
    obj.href = linkName + "&var2=" + document.getElementById("textareaIdName").value;
    return;
} 

<a id="lnk" href="" onclick="update(this);" target="_blank">click to export</a>

Answer 2

在您的 html 中：

<a ... onclick="return update(this);">click me</a>

在处理程序中传递 this 意味着函数中的 this 引用 DOM 元素，因此您不必使用 getElementById ，所以功能是：

function update(link) {
    link.href = /* whatever */;
}

现在您可以将处理程序放在多个元素上，而无需知道或使用 id。