Question

我有一个HTML按钮：

<button id="reset" type="button">Reset</button>

我想设置onclick行为 - 指向页面的链接，具体取决于此按钮的URL参数。在搜索时，我发现它只能通过Javascript，通过类似的东西：

<script type="text/javascript"charset="utf-8">
  function GetURLParameter(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) {
        return sParameterName[1];
      }
    }
  }

  document.getElementById('reset').onclick = function() { return "location.href=\'index.html?param=" + GetURLParameter('param') + "\'"; };
</script>

但是，这似乎不起作用。单击时，我的按钮不执行任何操作。我做错了什么？

P.S。我已经看到一些问题，通过使用JS动态创建按钮然后设置其onclick行为。但是，我很想知道如何修改通过JS使用HTML创建的按钮的onclick行为。

Answer 1

在这里，您的活动功能不会做任何事情。返回值只是控制本机事件（即，您可以通过返回false来阻止链接）。如果你想重定向用户，你可能想要这样的东西（未经测试）：

document.getElementById('reset').onclick = function() {
    location.href='index.html?param=' + GetURLParameter('param');
    return false; // This will block other possibly actions
};

＆＃13;

document.getElementById("test").onclick = function(){
  location.href = "http://stackoverflow.com/posts/37567793";
  return false;
};

＆＃13;

<button id="test">
  Click me
</button>

＆＃13;

Answer 2

在"之后放置location.href=标记，您不需要return声明。

document.getElementById('reset').onclick = function() {
  location.href="\'index.html?param=" + GetURLParameter('param') + "\'";
};

Answer 3

调用onclick事件的函数不需要返回URL，而是定义window.location。

此外，您在文档完全加载之前绑定onclick，因此当它尝试绑定事件时，该按钮不存在，因此单击它时没有任何反应。

这是一个工作示例（使用jQuery）：

<button id="reset" type="button">Reset</button>
<script>
    function GetURLParameter(sParam) {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++) {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam) {
                return sParameterName[1];
            }
        }
    }

    $(document).ready(function() {
        $("#reset").click(function(){
            window.location = "index.html?param=" + GetURLParameter('param');
        });
    });
</script>

本机JS中的相同示例：

<button id="reset" type="button">Reset</button>
<script>
    function GetURLParameter(sParam) {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++) {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam) {
                return sParameterName[1];
            }
        }
    }

    window.onload = function () {
        document.getElementById('reset').onclick = function() {
            window.location = "index.html?param=" + GetURLParameter('param');
        };
    };
</script>

动态设置html按钮

3 个答案: