如何使用 JS 更改 href 属性的值？

Question

我想在用户单击按钮时更改我网站上锚标记的 href 属性的值。 特别是我想更改此 URL 中 GET 参数的值。 （如果您不熟悉 { % url 'select_question' %}和 { { subcategory.name }}标签，请忽略它们，它们是 Django 模板标签。）按钮上的文本发生变化，但 href 中的 url 没有变化. 模式总是“未解决”。 我究竟做错了什么？ 谢谢！

<button id="changeModeBtn" class="btn btn-primary" type="button" name="button" onclick="change()">Unsolved Questions</button>

<a class="question_link" href="{% url 'select_question' %}?subcategory={{ subcategory.slug }}&mode=unsolved">{{ subcategory.name }}</a>

<script type="text/javascript">
function change(){
    var btn = document.getElementById("changeModeBtn");
    var link = document.getElementsByClassName("question_link");
    if (btn.textContent=="Unsolved Questions") {
        btn.textContent="Solved Questions";
        link.setAttribute("href", "{% url 'select_question' %}?subcategory={{ subcategory.slug }}&mode=solved");
    } else if (btn.textContent=="Solved Questions") {
        btn.textContent="All Questions";
        link.setAttribute("href", "{% url 'select_question' %}?subcategory={{ subcategory.slug }}&mode=all");
    } else {
        btn.textContent="Unsolved Questions";
        link.setAttribute("href", "{% url 'select_question' %}?subcategory={{ subcategory.slug }}&mode=unsolved");
    }
}
</script>

Answer 1

document.getElementsByClassName返回HTMLCollection ，而不是单个元素。 所以把代码改成：

function change(){
    ...
    var link = document.getElementsByClassName("question_link")[0];
    ...
}

Answer 2

我不知道 Django 模板标签，但是如果您想在某些操作上使用 js 设置 href ，那么您可以尝试以下解决方案。

var a = document.getElementById('yourlinkId'); 
a.href = "somelink url";