Question

我无权编辑HTML，但想在页面中添加一段JavaScript，以便覆盖按钮上的默认onClick行为。

这是代码，我想在用户单击“Enter”按钮后使用JS将用户带到google.com。我也不想使用类，名称或类型来查找此代码，但如果这是唯一的选择。

HTML：

<div class="button">
<input type="submit" name="cantUseName" value="Enter" onclick="if(isNew){ $(jQuery('[id$=Test]')[0]).show(); return false; } else return true;" class="main">
</div>

从我在这里收集的内容中，我创建了一个技术上应该做我想做的JS。但是，我无法在小提琴中测试它，因为它出于某种原因删除了URL中的代码，告诉我JS存在问题。

JS：

    document.querySelectorAll("input[value=Enter]").onclick = function () {
        location.href = "www.google.com";
};

Answer 1

querySelectorAll() 会返回nodeList，这是一个类似于数组的对象，它是所有找到的元素的集合。如果您要使用此方法，则需要使用索引从集合中检索元素，如下所示：

document.querySelectorAll("input[value=Enter]")[0].onclick = ...

但是，您希望只有一个元素与您的选择器匹配，因此请改用 querySelector() 。这将返回第一个匹配元素，而不是元素集合（因此不需要索引），并且它可以提高性能，因为它在找到匹配后停止搜索匹配。

另外，在http://前面添加www.google.com。

最后，请注意，如果它是submit按钮，则表单提交可能会产生副作用，并且会重定向到form元素action属性值。这可以通过确保您的函数接收事件引用然后取消事件来避免，如下所示：

document.querySelector("input[value=Enter]").onclick = function(evt) {
    evt.preventDefault();  // Cancel the native event
    location.href = "http://www.google.com";
};

Answer 2

尝试修改选择器和onclick功能以匹配以下内容。我以这种方式取得了更好的成功。

jQuery("input[value=Enter]").on('click', function (e) {
    e.preventDefault();
    location.href = "http://www.google.com";
});

如果您想避免使用jQuery，可以遵循以下几点：

document.querySelector("input[value=Enter]").onclick = function(e) {
    e.preventDefault();
    location.href = "http://www.google.com";
};

在不修改HTML的情况下，使用JavaScript更改onclick行为

2 个答案: