how can i make my js code select the right html page to choose?-CodePudding

So I have a search engine for my country's states ( made with html, css and js) and for each state I want to make an html page, so when I go to the search bar and type the state's name and I click the search icon it shows the html page that belongs to that stat (there are 48 html page)

function select(element)
{
    let selectData = element.textContent;
    inputBox.value = selectData;
    icon.onclick = ()=>
    {
        webLink = `https://www.google.com/search?q=${selectData}`;
        linkTag.setAttribute("href", webLink);
        linkTag.click();
    }
}

I tried this way, but it make a research on the state in google, I don't want that. I want to show my html page

I also tried this :

webLink = htmls/?q=${selectData}; linkTag.setAttribute("href", webLink); linkTag.click();

i removed the google link and ive out the name of the folder in which the html pages are stored now when i click enter an index page comes out and i have to choose which html page to show manually, how can i make it choose automatically?

CodePudding user response：

Instead of a linkTag.click().click(), how about using location.href = webLink. This way, it'll directly replace the browser url and will input exactly the value of webLink. Also, it won't propagate events.

CodePudding user response：

You can try using window.location.assign() method to redirect to specific HTML page based on the state selected in search bar.

Look this:

function select(element) {
    let selectData = element.textContent;
    inputBox.value = selectData;
    icon.onclick = () => {
        webLink = `htmls/${selectData}.html`;
        window.location.assign(webLink);
    }
}

when the user clicks on the search icon, browser will redirect to HTML page with the name of the selected state. For example, if the user selected "California", the browser will redirect to "htmls/California.html".

You can also use the location.replace() method instead of location.assign(). It will replace the current page with new page instead of keeping the current page in your browser history.

CodePudding user response：

There are several ways to make your JavaScript code select the right HTML page to choose, depending on your specific needs and requirements. Some common methods include:

Using the DOM API: The Document Object Model (DOM) API allows you to interact with the HTML and XML documents, you can use this API to select the specific elements you want to target and perform operations on them. You can use the DOM API to select elements by their tag name, class name, or ID, and then manipulate them using JavaScript.

Using jQuery: jQuery is a popular JavaScript library that makes it easy to select and manipulate elements on a web page. You can use jQuery's selectors to select elements by their tag name, class name, or ID, and then perform operations on them using jQuery methods.

Using a JavaScript framework: JavaScript frameworks such as React, Angular, or Vue.js, provide a structure to your code, and also provide a set of tools to help you manage the state and rendering of your application. You can use these frameworks to create a single-page application (SPA) and use routing to select the right HTML page.

Using a server-side language: If you are using a server-side language such as Node.js, you can use it to handle the routing and serve the right HTML page based on the user's request. This will allow you to handle the routing logic on the server, and leave the JavaScript code to handle only the client-side logic.

Using a routing library: There are several routing libraries available for JavaScript such as React Router or Vue Router, that you can use to handle the routing in your application. These libraries provide a set of tools to handle client-side routing and allow you to map URLs to specific components in your application.

It's worth noting that the best solution will depend on the specific requirements of your project, the complexity of your codebase, and the technologies you are using.