How to use the window location

Question

So i wanna create a form with a textbox and a button that on click opens the url that i type inside the textbox,any advice on how to use a function to make it work?

function open(url) {
  var win = window.location(url, '_blank');
  win.focus();
}

<form>
  Give Url:<br>
  <input type="url" name="url" placeholder="http://www.example.com"><br>
</form>
<button type="button" onclick="open(url)">Open Url</button>

Your code has an error: *Uncaught ReferenceError: url is not defined* — Derek Pollard, Apr 17 '19 at 21:30

score 0 · Answer 1 · answered Apr 17 '19 at 21:25

0

Use window.open:

function open(url) {
    var win = window.open(url, "_blank");
    win.focus();
}

answered Apr 17 '19 at 21:25

Jack Bashford

43,180
11
50
79

1

Ironically, if OP hadn't have over-written "open", wouldn't it have defaulted to `window.open` ? – Derek Pollard Apr 17 '19 at 21:27
1

I agree @DerekPollard. – Jack Bashford Apr 17 '19 at 21:50

score 0 · Answer 2 · answered Apr 17 '19 at 21:34

The problem is that you're passing in an unknown variable, called url:

function open(url) {
  var win = window.location(url, '_blank');
  win.focus();
}

<form>
  Give Url:<br>
  <input id="url" type="url" name="url" placeholder="http://www.example.com"><br>
</form>
<button type="button" onclick="open(document.getElementById('url').value)">Open Url</button>

In my snippet, I am passing the value of the input element with the ID of url

Scott Marcus · Answer 3 · 2019-04-17T21:39:35.747

0

You're not submitting any form data anywhere, so you don't need a form element and your input doesn't need a name attribute.

Just call window.open(url) and you should not be setting up your event handlers in HTML (even though you see everyone else do it).

The code below works, but not here in the Stack Overflow code snippet environment. But, you can test the same code here.

let tb = document.querySelector("input"); // Get a reference to the textbox

// Get a reference to the button and set up the click event handler for it
document.querySelector("button").addEventListener("click", function () {
  var win = window.open(tb.value);
});

Give Url:<br>
<input type="url" placeholder="http://www.example.com"><br>
<button type="button">Open Url</button>

edited Apr 17 '19 at 21:39

answered Apr 17 '19 at 21:36

Scott Marcus

64,069
6
49
71

It is always ironic to me that for so long we were told to separate Javascript and HTML, then react and vue come along and blow that all to shreds – Derek Pollard Apr 17 '19 at 21:39
@DerekPollard That's not true at all. You are comparing apples and oranges. When we talk about not putting inline event attributes into HTML, we're talking about the final code that will be executed. When you talk about the practice in frameworks, that's not the code that actually gets executed. That code is converted into other code by the framework first. This is well-documented. – Scott Marcus Apr 17 '19 at 21:43
1

Not at all apples to oranges, both are maintained by developers - which is where the fallacy that this was bad came from, the final product matters very little. My point being, the concepts don't hold water when it comes to implementation because, as we can see with react and vue, it makes development easier and quicker. – Derek Pollard Apr 17 '19 at 21:46
@DerekPollard And the debate rages on. One is code that will be executed and one is code that will turned into something else. One is an environment where you have a choice on how to do it and one is an environment where you don't. And with HTML, you can get different results depending on which way you go - - it's not a purely stylistic choice. – Scott Marcus Apr 17 '19 at 22:03

How to use the window location

3 Answers3