iframe test

user input returns website

by trentHarlem

HTML

<div id="input-container">
        <input type="text" class="form-control" id="userInput" placeholder="type website">
          <button id="subButton">Go</button>
        </div>

       <!--  <iframe src="https://fr.wikipedia.org/wiki/Main_Page" width="640" height="480"> -->
<!-- <input type="url" placeholder="http://example.com/" /><button id="urlclick">Go</button>
<iframe id="frm" target="_parent"></iframe> -->
   <iframe id="web" target="_parent"></iframe>

CSS

#web {
  height: -webkit-fill-available;
  width: 100%;
}

JavaScript

function getInput() {
    var userInput = document.getElementById('userInput').value;
    console.log(userInput);
}  

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getInput, false);


//   document.getElementById('urlclick').onclick = function() {
//     document.getElementById('frm').src = this.previousSibling.value;
//     return false;
//   }

  document.getElementById('subButton').onclick = function() {
    document.getElementById('web').src = 'https://' + userInput.value;
    return false;
  }
  document.getElementById('subButton').addEventListener("click", function() {
    document.getElementById('input-container').style.display = 'none';
  
});