文档.getElementById onclick每次页面加载只工作一次

document.getElementById onclick only working once per page load

本文关键字：工作 一次 onclick getElementById 文档 加载      更新时间：2023-09-26

我有一个链接:

<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表单中的文本区域框中获取文本，并将其传递到控制器中进行输出。它在我第一次单击链接时工作，但是如果我更改框中的文本并再次单击链接，那么无论我在文本框中更改了什么，它都会在每次单击其他链接时保持相同的值，直到我重新加载页面。链接返回文件下载。

如何保持从文本区获得新的文本而不重新加载页面?

出现这种情况是因为每次按下链接时都使用+=，这将继续将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>

在你的html中:

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

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

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

现在，您可以在不知道或使用id的情况下将处理程序放在多个元素上。

相关文章：