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;
}

Предполагается, что текст будет извлечен из поля textarea в форме jsp для передачи в контроллер для вывода. Это работает в первый раз, когда я нажимаю на ссылку, но затем, если я изменяю текст в поле и снова нажимаю на ссылку, в нем сохраняется то же значение, что и при первом щелчке по любому другому щелчку по ссылке, пока я не перезагрузлю страницу, независимо от того, что я изменяю в текстовое окно. Ссылка возвращает файл загрузки.

Как мне получать новый текст из textarea, не перезагружая страницу?

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 */;
}

Теперь вы можете поместить обработчик в несколько элементов, не зная и не используя идентификатор.