Html Question posted in
Some basic documentation can be found here.

A simple way to change text field in an offline html page based on an input parameter in url

I have a very simple offline html page looking like this:

HEADER

Body Text

But the contents of the header and body text need to changed based on input param in url (I think it should be looking like this: "index.html?lang=abc"?), the text strings for on each lang are pre-defined and if possible both the javaScript code and the possible values of text fields should be stored inside the html page itself.

I have basically zero knowledge about html and JavaScript while needing it asap so I’ll be very glad if you anyone can help me with this with a simple solution so I can get it with my tofu brain. Thank you.

I tried to follow some examples and adapted some code samples on SO and google, and at least got the split lang parameter right, but while trying to change the text field it bricked my html and it can’t be displayed. I cannot access Youtube during work hour to search for solutions there.

Tags:

3

Answers


  1. 0

    You didn’t specify what you want to do, so my example will be very basic.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>url</title>
</head>
  <body onload="parsePageUrl();">

    <h1>Page URL:</h1>

      <div id="divUrl">
      </div>
      <br>
      <div id="divUrlSearch">
      </div>

    <script>
      function parsePageUrl() {
        const url = new URL(window.location.href);
        var objDiv = document.getElementById("divUrl");
        var objDivS = document.getElementById("divUrlSearch");
        objDiv.innerHTML = url.href;
        objDivS.innerHTML = url.search;
        }
    </script>
  </body>
</html>

    This example uses body onload to trigger the JavaScript function parsePageUrl which reads window.location.href into a new URL. Then the entire URL is written into the div object with the id that equals divUrl, and only the search part of the URL into another div object.

    Login or Signup to reply.
  2. 0

    Maybe You can use JavaScript to parse the URL parameters and update the text content of your HTML elements accordingly. Try it out!

            // Function to parse URL parameters
        function getUrlParameter(name) {
            name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
            var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
        };

        // Function to update text based on language parameter
        function updateText() {
            var lang = getUrlParameter('lang');
            var headerText, bodyText;

            // Define text for different languages
            switch (lang) {
                case 'en':
                    headerText = 'English Header';
                    bodyText = 'English Body Text';
                    break;
                case 'fr':
                    headerText = 'French Header';
                    bodyText = 'French Body Text';
                    break;
                default:
                    headerText = 'Default Header';
                    bodyText = 'Default Body Text';
            }

            // Update HTML elements with new text
            document.getElementById('header').innerText = headerText;
            document.getElementById('bodyText').innerText = bodyText;
        }

        // Call updateText function when the page loads
        window.onload = updateText;
    <body>
    <h1 id="header">Header</h1>
    <p id="bodyText">Body Text</p>
</body>
    Login or Signup to reply.
  3. 0

    Does your desire is to make a translation based on the lang param in URL?

    I assume that your text element has a id = ‘text’

    <p id="text">hello</p>

    const queryString = window.location.search; // ?lang=vi
const urlParams = new URLSearchParams(queryString); 
const lang = urlParams.get('lang'); // get the lang in URL

const textElement = document.querySelector('#text'); // assume that your text has a id="text"

textElement.innerText = "xin chao"; // update the content of the p tag with new text
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search