Change javascript code based on input value-CodePudding

I am making a program that hides your history by what you are searching

function bruh() {
  var win = window.open();
  win.document.body.style.margin = '0';
  win.document.body.style.height = '100vh';
  var f = win.document.createElement("iframe");
  window.focus();
  var url = "URLINPUT";
  if (!url) return;
  f.style.width = "100%";
  f.style.height = "100%";
  f.style.border = 'none';
  f.style.margin = '0';
  win.document.body.appendChild(f);
  f.src = url
}

so they input a url. and the URLINPUT changes to what they are trying to search

CodePudding user response：

You can use parameters in your function.

function bruh(url) {
  var win = window.open();
  win.document.body.style.margin = '0';
  win.document.body.style.height = '100vh';
  var f = win.document.createElement("iframe");
  window.focus();
  // url is already declared in function
  if (!url) return;
  f.style.width = "100%";
  f.style.height = "100%";
  f.style.border = 'none';
  f.style.margin = '0';
  win.document.body.appendChild(f);
  f.src = url
}

<html>
  <body>
    <form>
      <input type="text" id="text" placeholder="Please type a URL!" onchange="bruh(this.value);" value="Please type a URL!">
    </form>
  </body>
</html>

This will execute the function when the input is changed with the value of the text input.

More information is on MDN

CodePudding user response：

Make url a function parameter.

function bruh(url) {
  if (!url) return;
  var win = window.open();
  win.document.body.style.margin = '0';
  win.document.body.style.height = '100vh';
  var f = win.document.createElement("iframe");
  f.style.width = "100%";
  f.style.height = "100%";
  f.style.border = 'none';
  f.style.margin = '0';
  win.document.body.appendChild(f);
  f.src = url
}

Then your search field can be something like:

<input id="search" onchange="bruh(this.value)">