Without modifying HTML, change onclick behavior using JavaScript

Question

I would not have access to edit the HTML but would like to add a piece of JavaScript to a page so that it overwrites the default onClick behavior on a button.

This is the code, and I would like to use JS to take users to google.com after they click the "Enter" button. I would also prefer not to use the class, name or type to find this code, but will if that's the only option.

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>

From what I gathered here, I created a JS that should technically do what I want. However, I cannot test this in fiddle because it removed the code in the URL for some reason, telling me that there is something wrong with the JS.

JS:

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

https://jsfiddle.net/49vggk8z/ and [0] after querySelectorAll.... — sinisake, Dec 21 '16 at 17:59
@GolezTrol [What do **QUERYSELECTORALL**, getElementsByClassName and other getElementsBy* methods return?](http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Oriol, Dec 21 '16 at 18:00
I agree, I would also prevent the default click event using something like `preventDefault()` to stop the form from submitting, if that's what you want. — Matt K, Dec 21 '16 at 18:01
Yes, that's the title of that question. And the *answer* to it, might be useful here. But the question is not a duplicate at all and marking it as such without context is just confusing. It's like someone asks what is 2+3 and you point them to 1+4. — GolezTrol, Dec 21 '16 at 18:01
Yeah, so the main problem is the fact that the `document.querySelectorAll` returns an array of all matching elements, however, to make his code work more securily, he also needs to add the `e.preventDefault()` and potentially return false at the end of the eventhandler — Icepickle, Dec 21 '16 at 18:01
@Oriol I know I'm heading for trouble here, but I will say that the post you reference makes no mention of `querySelector()`, which was ultimately the answer I proposed. So, in that regard, the question is not a duplicate because the correct solution to this problem is to *not* use `querySelectorAll()` at all. Additionally, there were other issues that would prevent the desired behavior from taking effect besides `querySelectorAll()` — Scott Marcus, Dec 21 '16 at 18:28
@ScottMarcus Well, `querySelectorAll` is there, both in the title and in the question. It's just that the problem is the same for all these methods. — Oriol, Dec 21 '16 at 18:31
@Oriol Understood completely, but the best answer in this case is to not use it. Pointing to the other post does a dis-service to this question because it's really not the best answer. — Scott Marcus, Dec 21 '16 at 18:32

Scott Marcus · Accepted Answer · 2016-12-21T18:08:25.747

querySelectorAll() returns a nodeList, which is an array-like object that is a collection of all the found elements. If you were to use this method, you'd need to retrieve the element from the collection with an index, like this:

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

But, you are expecting just one element to match your selector, so use querySelector() instead. This returns the first matching element, rather than a collection of elements (so no index is needed) and it can improve performance as well since it stops searching for matches after finding a match.

Also, add http:// in front of www.google.com.

Finally, keep in mind that if it is a submit button, there may be a side effect of a form submission and a redirect to the form element's action attribute value. This can be avoided, by making sure your function receives the event reference and then cancelling the event, like this:

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

Bryant Makes Programs · Answer 2 · 2016-12-21T18:06:25.210

-2

Try modifying your selector and onclick function to match the following. I've had better success triggering actions in this fashion.

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

If you'd like to avoid jQuery, you could go along these lines:

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

edited Dec 21 '16 at 18:06

answered Dec 21 '16 at 18:04

Bryant Makes Programs

1,493
2
17
39

1

Why bring JQuery into this? – Scott Marcus Dec 21 '16 at 18:05
where did you see JQuery in this question? – Icepickle Dec 21 '16 at 18:05

Without modifying HTML, change onclick behavior using JavaScript

2 Answers2