Question 289986 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – Using JavaScript to toggle visibility of content based on URL parameter

I have this test HTML:

// Get the URL parameter value
const urlParams = new URLSearchParams(window.location.search);
const paragraphNumber = urlParams.get('paragraph');

// Hide all paragraphs except the one specified in the URL parameter
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach((paragraph, index) => {
  if (index + 1 !== parseInt(paragraphNumber)) {
    paragraph.style.display = 'none';
  }
});

// Hide all titles except the one specified in the URL parameter
const titles = document.querySelectorAll('title');
titles.forEach((title, index) => {
  if (index + 1 !== parseInt(paragraphNumber)) {
    title.style.display = 'none';
  }
});
// Hide all headings except the one specified in the URL parameter
const headings = document.querySelectorAll('h1');
headings.forEach((heading, index) => {
  if (index + 1 !== parseInt(paragraphNumber)) {
    heading.style.display = 'none';
  }
});
body {
  font: 300 20px "Open Sans", sans-serif;
  color: #666;
  background-color: #bdc3c7;
  line-height: 1.8rem;
}

.mask-img {
  -webkit-mask-image: linear-gradient(to top, transparent 25%, black 75%);
  mask-image: linear-gradient(to top, transparent 25%, black 75%);
}

.mask-img img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border: 1px solid;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}

article {
  max-width: 60%;
  background-color: white;
  margin: 0 auto;
  padding: 5px 30px;
  border-radius: 15px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

article h1 {
  color: #3498db;
  padding-bottom: 15px;
  border-bottom: 1px dashed #bdc3c7;
}
<article>
  <h1>Title 1</h1>
  <h1>Title 2</h1>
  <p>Para 1</p>
  <p>Para 2</p>
</article>

So I can call it like this:

  • test.html?paragraph=1
  • test.html?paragraph=2

But I will have 50+ languages. Is this the simplest solution? I am not worried about SEO because this page is for display internally in a WebView2 control of a Windows application.

I think this approach is better:

<body>

    <article>
        <h1 id="Title">Title 1</h1>
        <p id="Phrase"></p>
     <script>
     var language = {
      eng: {
        title: "Hello",
        phrase: "Goodbye"
      },
      es: {
        title: "Hola",
        phrase: "Adíos"
      },
      fr: {
        title: "Bonjour",
        phrase: "Au revoir"
      }
    };

    const head = document.getElementById(`Title`);
    head.innerText = language.es.title;

    const para = document.getElementById(`Phrase`);
    para.innerText = language.es.phrase;
    </script>
   </article>

</body>

But, if I change the URL parameter like this:

?language=es

I don’t know how to take that value and use it here:

para.innerText = language.es.phrase;

How do I insert the parameter value where .es. is right now?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This appears to be the simplest given my requirements:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font: 300 20px "Open Sans", sans-serif;
            color: #666;
            background-color: #bdc3c7;
            line-height: 1.8rem;
        }

        .mask-img {
            -webkit-mask-image: linear-gradient(to top, transparent 25%, black 75%);
            mask-image: linear-gradient(to top, transparent 25%, black 75%);
        }

        .mask-img img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            border: 1px solid;
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
            -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
        }

        article {
            max-width: 60%;
            background-color: white;
            margin: 0 auto;
            padding: 5px 30px;
            border-radius: 15px;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        }

        article h1 {
            color: #3498db;
            padding-bottom: 15px;
            border-bottom: 1px dashed #bdc3c7;
        }
    </style>
    <title id="Title">Title 1</title>
    <title>Title 2</title>
</head>

<body>

    <article>
        <h1 id="Heading">Title 1</h1>
        <p id="Phrase"></p>
     <script>
     var language = {
      eng: {
        title: "Hello",
        phrase: "Goodbye"
      },
      es: {
        title: "Hola",
        phrase: "Adíos"
      },
      fr: {
        title: "Bonjour",
        phrase: "Au revoir"
      }
    };
    
    // Get the URL parameter value
    const urlParams = new URLSearchParams(window.location.search);
    const languageCode = urlParams.get('language');

    const title = document.getElementById(`Title`);
    title.innerText = language[languageCode].title;

    const head = document.getElementById(`Heading`);
    head.innerText = language[languageCode].title;

    const para = document.getElementById(`Phrase`);
    para.innerText = language[languageCode].phrase;
    
    </script>
   </article>

</body>

</html>

  2. 0

    I would use a framework for this (e.g. svelte)

    I converted the same example to svelte code below. Unfortunately Svelte REPL clears any foreign querystring parameter so I had to use buttons instead.

    App.svelte:

    <script>
    const locales = {
        en: {
            title: 'Title English',
            paragraph1: 'Para English',
        },
        it: {
            title: 'Title Italian',
            paragraph1: 'Para Italian',
        },
    };
  let locale = 'en';
</script>

<style>
        article {
                max-width: 60%;
                background-color: white;
                margin: 0 auto;
                padding: 5px 30px;
                border-radius: 15px;
                box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        }

        article h1 {
                color: #3498db;
                padding-bottom: 15px;
                border-bottom: 1px dashed #bdc3c7;
        }
</style>

<button on:click={() => locale = 'en'}>English</button>
<button on:click={() => locale = 'it'}>Italian</button>

<article>
        <h1>{locales[locale].title}</h1>
        <p>{locales[locale].paragraph1}</p>
</article>

    Link for this example in Svelte REPL

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search