Go to link by JavaScript

Question

Hello friends I have a text input and a button In Input Text, a link is entered, for example, the link of an Instagram post After entering the link, I want to go to the link by clicking the button How do I do this with JavaScript?

  <div class="container">         
        <div class="main">
          <input type="text" placeholder="https//:www.instagram.com/..."
          id="link">
    
     <button id="button-1"><a href="#">go</a></button>       
        </div>
    </div>

Don't put a link inside a button. you either have a button, or you have a link. So in this case, use an `` without an initial `href` attribute (don't set it to `#`, we're not using HTML4.01, in HTML5 that's not a placeholder: it means "navigate to the top of the page"). Then, in your JS, give the input element an `input` listener which assigns the input value to `a.href` (after verifying it's actually a link, of course?) so that when people click "go" they click a normal, real link. And then use CSS to make your `` look like a button. That's what CSS is for. — Mike 'Pomax' Kamermans, Jul 09 '21 at 18:50

score -1 · Accepted Answer · answered Jul 09 '21 at 18:58

Capture the URL on the blur event and apply it to the link. You can validate for a valid URL this way as well.

window.addEventListener('load', () => {
  document.querySelector('#link').addEventListener('blur', el => {
    if (!el.target.value.includes('http')) {
      alert('Please enter a valid URL')
      return;
    }
    document.querySelector('#go-link').setAttribute('href', el.target.value)
  })
})

<div class="container">
  <div class="main">
    <input type="text" placeholder="https//:www.instagram.com/..." id="link">
    <a href="#" id='go-link' target="_blank">go</a>
  </div>
</div>

This question may be a duplicate, but the linked duplicate solution isn't really applicable to this question, so I'm posting an answer regardless — Kinglish, Jul 09 '21 at 19:01

Go to link by JavaScript

1 Answers1