search bar on key press enter not running function to search

Question

I have a search bar that searches the input on google and it works fine. I was trying to add an on keypress enter functionality to run the search when I press enter but it's not working I added a console.log to debug if my function searchGoogle was running and it passes I don't get how it's not searching on google on keypress enter though. When the search icon is pressed it works. Any help is appreciated. Thanks in advance.

function doSomething(event) {
  console.log(event.keyCode);
  if (event.keyCode == 13) {
    searchGoogle();
  }
}

function searchGoogle() {
  var input = document.getElementById("googleSearchInput");
  document.getElementById("googleSearchButton").href =
    (("https://www.google.com/search?q=") + (document.getElementById("googleSearchInput").value));
  console.log(input.value);
}

.form-group {
  width: 50%;
  position: absolute;
  top: 3%;
  left: 4%;
  z-index: 1;
}

.form-control:focus {
  border-color: #ff80ff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5);
}

.form-group img {
  width: 4%;
  height: auto;
  position: absolute;
  top: 50%;
  right: 1%;
  margin-right: 1%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

<div class="form-group ">
  <label class="poweredByGoogle">Powered By Google</label>
  <input type="text" class="form-control" id="googleSearchInput" placeholder="Search The Web" onkeyup="doSomething(event)">
  <a href="" id="googleSearchButton" onclick="searchGoogle()" target="_target"> <img src="https://img.icons8.com/material-outlined/128/000000/search--v1.png" /></a>
</div>

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — SuperStormer, Apr 02 '21 at 18:13
The user has to actually click a link for changing the href to do anything (and it doesn't work on search button press either - I don't think "_target" is a valid value for the target attr). — SuperStormer, Apr 02 '21 at 18:17
it does work on search button click it opens and search the input on a new tab(it doesn't work on stack overflow ide b/c they don't allow redirect) so, the keypress enters use is to only call the function```searchGoogle``` not redirect. @SuperStormer — anon10023108, Apr 02 '21 at 18:23

score 1 · Accepted Answer · answered Apr 02 '21 at 18:26

Your press Enter doesn't work because you don't have an event that clicks your link. In other words - you assigned new href to the link but didn't click it.

Here updated code for you

function doSomething(event) {
  console.log(event.keyCode);
  if (event.keyCode == 13) {
    searchGoogle();
  }
}

function searchGoogle() {
  var input = document.getElementById("googleSearchInput");
  var link = document.getElementById("googleSearchButton");
  // here you updated link href
  link.href = (("https://www.google.com/search?q=") + (document.getElementById("googleSearchInput").value));

  console.log(input.value);
  // here you clicked it
  link.click();
}

search bar on key press enter not running function to search

1 Answers1