-1

I have a script in JavaScript that in a part of the code create a 'virtual button' and press it automatically.

This button is not in the HTML page and is only used to store a link that at a certain point of the script must be clicked. Here's the code:

var virtualButton = document.createElement("button");
var linkText = document.createTextNode("assign to relevant user");
virtualButton.appendChild(linkText);
virtualButton.title = "assign to relevant user";
virtualButton.href = link;
document.body.appendChild(virtualButton);

virtualButton.click();

Everything seems fine to me, still the code does not actually click the button.

Am I missing something here?

Agricolo
  • 65
  • 1
  • 12
  • Does this answer your question? [How to create an HTML button that acts like a link](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link) – computercarguy Dec 13 '21 at 21:56
  • What do you expect to happen when clicking on this ` – Phil Dec 13 '21 at 21:56
  • How do you know the click is not being triggered? an "href" on a "button" is not a link. A button by default has a set of "type" depending upon if it is in a form or not otherwise no default "behavior". I do not see where you are listening for the click to actually DO something. This kind of feels like you want `window.location.href="someurl"` – Mark Schultheiss Dec 13 '21 at 21:59
  • `button.href` is not `a.href`. The click works. To test, assign an `onclick` event to your button. Also note your "event" is not trusted (because it's programmatic) and there are limitations (set by each browser individually) about what a non-trusted event can do. And that event param is read-only. There's nothing you can do to set it to `true`. That's by design. – tao Dec 13 '21 at 21:59
  • actually, the answer below from @Alezander Nied solved my issue. The issue was with the way I created the virtual button - I used button instead of anchor. Thanks to all! – Agricolo Dec 13 '21 at 22:04
  • 2
    BUT all that code can just be a one line: `window.location.href=link;` that does the same thing – Mark Schultheiss Dec 13 '21 at 22:06
  • this link I'm putting there in the anchor is not a "real" link, but more of a request I'm sending to the server to perform an action on a different page. Actually I now have the problem that clicking on virtualButton, beside the action, I'm also getting redirected to this other page, while I should remain on page 1. Don't know if I explained it well, sorry for my English – Agricolo Dec 13 '21 at 22:11
  • 1
    You can send a request to any URL without creating a DOM element and clicking on it programmatically. Also, you have the option of running code based on the result returned by the endpoint you're calling, using promises. Read about [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) or [FetchAPI](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) which could be used for your purpose. – tao Dec 13 '21 at 22:15

1 Answers1

3

<button/> elements do not have an .href attribute. You most likely want to use an anchor (<a/>) element. See below:

var virtualButton = document.createElement("a");
var linkText = document.createTextNode("assign to relevant user");
virtualButton.appendChild(linkText);
virtualButton.title = "assign to relevant user";
virtualButton.href = "https://www.google.com";
document.body.appendChild(virtualButton);

virtualButton.click();

(It won't actually navigate because it is in a sandboxed <iframe/>, but you will see it attempt to do so).

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
  • 1
    Why? why not just `window.location.href="https://www.google.com"` and it simply goes there? – Mark Schultheiss Dec 13 '21 at 22:04
  • @MarkSchultheiss - you're not wrong. I naively assumed there was a compelling reason the user was trying to add an anchor to the DOM and clicking it, but you certainly may be correct that I've fallen victim to answering an XY problem. If the user can provide more context as to _why_ they are doing this we may well find that this whole approach is completely overengineered or otherwise incorrect. – Alexander Nied Dec 14 '21 at 05:09