menu

Questions & Answers

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

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?

Comments:
2023-01-24 00:10:10
You say you don't want the search button to do a google search, yet you set the link to a google search page. What are the URLs to your own pages?
2023-01-24 00:10:10
i've set the google link just to test if its working or not. the pages are stoored in a folder in my localdisque i dont have URLs
2023-01-24 00:10:10
Do you have a single template which you use for every state, or do you have separate *.html file for every state (48 *.html files)?
2023-01-24 00:10:10
the html pages are separat, there are 48 html page
2023-01-24 00:10:10
Rather than a "search", list all available "states" in a <select> with each one as a different <option> where <option value="page_for_that_state.html">state name</option>. If you want to be able to search, use something like [tag;select2] to convert it to a searchable drop down.
2023-01-24 00:10:10
but with what can i change the google link when i want the js code select a specefic page among other pages
2023-01-24 00:10:10
Change the google link to the pages/files you created.
2023-01-24 00:10:10
i did that, but it keep telling me that the page isnt found eventhou the path is correct
2023-01-24 00:10:10
Please update your post to include your attempt with your own files. A screenshot of your directory structure may be helpful too.
2023-01-24 00:10:10
i tried to put a screenshot but they said i cant post a picture yet so im gonna describe the folder structure, i have a home.html and function.js that does the work ans states.js (it contains all the states as a variables) and there are 48 other html files, each one named after the name of a state, i want to make the function.js choose between those 48 html files to show the right one
2023-01-24 00:10:10
It sounds like they are all in the same directory. You haven't yet shown your attempt to use your files in your code.
2023-01-24 00:10:10
yes the html files are all in the same directory, ive edited the post now with my attempt
2023-01-24 00:10:10
What is htmls in htmls/?q=${selectData}? Doesn't seem like a file name. It should be something like ${selectData}.html
Answers(3) :

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.

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.

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.