The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below:

// JavaScript 

var countries = [
  { name: 'Thailand', link: 'www.google.com' },
  { name: 'Tanzania', link: '' },
  { name: 'Tunisia', link: '' },
  { name: 'Taiwan', link: '' },
];

var matchingCountries = [];

function updateCountry() {
  var searchTerm = document.getElementById('countrySearchInput').value;
  var resultsList = document.getElementById('countrySearchResults');

  resultsList.innerHTML = '';

  if(searchTerm.length === 0) return;

  var matchingCountries = countries.filter(function(country) {
    return country.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
  });

  if(matchingCountries.length > 0) {
     var fewerCountries = matchingCountries.splice(0, Math.min(matchingCountries.length, 5));

      fewerCountries.forEach(function(country) {
          resultsList.innerHTML += "<li><a href='" + country.link + "'>" + country.name + "</a></li>";
      });
  } else {
    resultsList.innerHTML += "<li>No search results</li>";
  }
}

function startSearch() {
  document.getElementById('countrySearchResultsContainer').style.display = 'block';
}

function endSearch() {
  document.getElementById('countrySearchResultsContainer').style.display = 'none';
}
/* CSS */
#country-search {
font-family: Helvetica;
}
*, *:before, *:after {
   box-sizing: border-box;
}
#country-search {
   width: 400px;
   display: block;
}
#country-search .entry input {
   width: 400px;
   font-size: 24px;
   padding: 12px;
   border-radius: 10px;
   border: 3px solid white;
   background-color: rgba( 150, 150, 150, 0.1);
   margin: 0;
}
#country-search .entry input:focus {

}
...
...
<!-- HTML -->
<div id="country-search">
  <div class="entry">
    <input id="countrySearchInput" type="text" placeholder="Enter a country name" onkeyup="updateCountry()" onfocus="startSearch()" onblur="endSearch()" />
  </div>
  <div id="countrySearchResultsContainer">
    <ul id="countrySearchResults">
    </ul>
  </div>
</div>

The problem I am facing is that when typing 'Thailand' and trying to click it, the expected website "www.google.com" doesn't open up as intended. What could be causing this issue?

Answer №1

The URL you have provided is incorrect. Always remember to include the scheme when linking to external websites. Make sure to change the URL from www.google.com to http://www.google.com, and then you will be able to access the link once you enter Thailand.

Answer №2

Whenever you type in www.google.com, it will point to a specific file or item located within the directory where the HTML files are stored under the name www.google.com. To ensure that your hyperlink works correctly, it is advisable to include either http:/ or https:/ before the actual link. https:/www.google.com/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Question about using React, NPM, Vite, Babel, and Node.js together

I want to confirm my understanding. So, if I decide to create a react 'app' and incorporate babel for jsx support. Then, I opt for vite for enhanced development runtime and packaging. Lastly, I utilize node.js to execute my code. To sum it up, ...

Having trouble getting JSON data to display in CanvasJS

I am trying to retrieve JSON data using Ajax with this code. It works fine when fetching data from the original source, but it's not working with my own JSON data. What could I be missing? Any help would be greatly appreciated. Thank you. $(document) ...

When a specific item is selected from a drop-down menu, text boxes and drop-downs will dynamically appear and change

In the current version of my code, there is a single drop-down menu with three options for the user to select from. If "Complete" is chosen, a text box should appear. If "Abandon" or "Transfer" is selected, a separate drop-down menu needs to be displayed. ...

What is the best method to initialize a JavaScript function only once on a website that uses AJAX

Currently, I am facing an issue with a javascript function that needs to be contained within the content element rather than in the header. This is due to a dynamic ajax reload process which only refreshes the main content area and not the header section. ...

The issue of Access-Control-Allow-Origin not functioning properly when using Ajax for a POST request

I am encountering an issue with the header "Access-control-allow-origin" when making a request using the following code: <script type='text/javascript'> function save() { $.ajax( { type: 'POST', ur ...

The DOM assigned a new source to an image

Currently, I am working on a project that involves both jquery and PHP. In this project, users are able to upload images which are then displayed in blocks. The uploading functionality is already working, but I am facing an issue with setting the image sou ...

Encountering a CSS issue during the edit process with PHP and JavaScript

I'm encountering an issue when clicking on the edit button, as my data fetched from the DB should be displayed inside a text field. However, I'm facing a CSS-related error: Uncaught TypeError: Cannot read property 'style' of null Belo ...

Place a material-ui React component at the center of a footer section

I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it ou ...

PHP XML loop encountering issues with functionality

Hi there, I'm a newcomer to stackoverflow, but I've been following this site for quite some time. Currently, I'm working on a simple web application that will serve as a catalogue for music tracks, allowing users to add their own tracks afte ...

Is it possible for ajax to provide me with the information regarding the data size of the URL

Is there a way for the xjr object to access the total data size in KB or MB? I have been using the progress event and it can track this, so I was curious about obtaining the total data size. Here is the code snippet: var container = Pub.el('#super-1 ...

Looking for a JavaScript function that can utilize AJAX to execute PHP code and display the PHP output on the webpage

I've been trying to use JavaScript to execute some PHP code and then display the results on the page. I came across a piece of code that achieves this using ajax and by placing the PHP code in an external file. However, the code I found seems to show ...

Can you list out the directives that are responsible for generating child scopes in AngularJS?

I recently discovered that when using ng-if, it actually creates a child scope, leading to some confusion on my end. I'm curious about the reasons or benefits behind ng-if's scope creation. Can you also tell me which other built-in directives cre ...

Using the .slider class on concealed div elements

Explaining this may be a bit tricky, but here we go... I have multiple hidden divs that switch with each other when a link is clicked using $(document).ready(function(){ $('a').click(function () { var divname= this.name; $("#"+divname ...

Guide on setting a value in $(document).ready using code behind

I am currently working on a .NET application with the use of Twitter Bootstrap. My main challenge right now is retrieving data from a .aspx.cs page to a .aspx page. Here's a look at my code: strObject.cs public class strObject { public string Nam ...

Locate a specific text within a complex array of objects and retrieve the objects that contain the match as

I have an array of objects named input as shown below. Each object in the array contains a property vertical of type string, an array called platformList, and a nested object named radar_metadata. I am looking to implement a search functionality where I c ...

Toggle display of list items using jQuery on click event

I want to be able to toggle the visibility of my submenus when a link is clicked. Here's an example code snippet: <ul> <li><a href="www.example.com">Test</a></li> <li><a href="www.example.com ...

Ensuring consistent placement and scrollability of two divs across all screen sizes

I am in need of a solution to fix the top and bottom divs in the given image. The scroll should only occur when there is overflow. <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> ...

javascript change string into an array of objects

let dataString = "{lat: -31.563910, lng: 147.154312};{lat: -33.718234, lng: 150.363181};{lat: -33.727111, lng: 150.371124}"; let dataArray = dataString.split(';'); Produces the following output: let dataArray = [ "{lat: -31.563910, lng: 147 ...

CSS rotation causing issues with absolute positioning

In the example below, I have demonstrated the current behavior I am experiencing and the desired outcome. // Rotated div rotated.style.left = "50px"; rotated.style.top = "100px"; // Original "untouched" div original.style.left = "50px"; original.style.t ...

Tips for effectively applying an image as a border

Just starting out with HTML and CSS here, and I'm trying to figure out how to use an image as a border for a div element. Can someone help point out my mistake? div { width: 240px; height: 510px; background-color: lightblue; border-image ...