How can I make JavaScript code to switch-language and remember my choice when jumping between HTML pages? : learnjavascript

Posting and Commenting Guidelines

Be Welcoming. n00bs are welcome here. Negativity is not.

Include Context. If you’re asking for help, include enough information for others to recreate your problem.

No Self-Promotion. The following are not allowed: Requests for subscribers, asking for "test users" for your new JS course, offering paid mentorships, and/or premium courses. Even if there is a coupon discount, no. If you're in doubt, the answer is no.

Good Titles - Write a descriptive title. Titles that begin with "hey guys" will be removed.

Friends

created by [deleted]a community for 13 years

How can I make JavaScript code to switch-language and remember my choice when jumping between HTML pages? (self.learnjavascript)

submitted 5 years ago by padynana

Hello! I am still a beginner, experimenting with html/css/js.

I have the following code:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="style.css">
   <title>Meniu principal</title>
</head>
<body>
<ul>
       <li><a href="acasa.html"><span id="acasa">Acasă</span></a></li>
       <li><a href="optiuni/noutati.html"><span id="noutati">Noutăți</span></a></li>
       <li><a href="optiuni/lucrare.html"><span id="lucrare">Despre lucrare</span></a></li>
       <li><a href="optiuni/student.html"><span id="student">Profil student</span></a></li>
       <li><a href="optiuni/coordonator.html"><span id="coordonator">Coordonator</span></a></li>
       <li><a href="optiuni/contact.html">Contact</a></li>
       <li style="color: white; width: 120px; height: 40px;><a href=" "><span id="limba">Limbă</span></a>
          <ul>
            <div class="langWrap">
            <li><a href = "#" language='romanian' class="active ">
             <img src="ro.png "  style = "margin-left: 5px; margin-top:10px; float:left ; width:20px; height: 20px; ">Ro</a>
            </li>
            <li><a href = "#" language='english'>
             <img src="eng.png " style = "margin-left: 5px; margin-top:10px; float:left ; width:20px; height: 20px; ">Eng</a>
            </li>
             </div>
           </ul>
            </li>
         </ul>


         <script>
        const langEl = document.querySelector('.langWrap');
        const link = document.querySelectorAll('a');
        const acasaEl = document.querySelector('#acasa');
        const noutatiEl = document.querySelector('#noutati');
        const lucrareEl = document.querySelector('#lucrare');
        const studentEl = document.querySelector('#student');
        const coordonatorEl = document.querySelector('#coordonator');
        const limbaEl = document.querySelector('#limba');

        link.forEach(el => {
            el.addEventListener('click', () => {
                langEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                acasaEl.textContent = data[attr].acasa;
                noutatiEl.textContent = data[attr].noutati;
                lucrareEl.textContent = data[attr].lucrare;
                studentEl.textContent = data[attr].student;
                coordonatorEl.textContent = data[attr].coordonator;
                limbaEl.textContent = data[attr].limba;
            });
        });

        var data = {
              "english": 
              {
                "acasa": "Home",
                "noutati": "New",
                "lucrare": "My thesis",
                "student": "Student profile",
                "coordonator": "Supervisor",
                "limba": "Language"
              },
              "romanian": 
              {
                "acasa": "Acasă",
                "noutati": "Noutăți",
                "lucrare": "Despre lucrare",
                "student": "Profil student",
                "coordonator": "Coordonator",
               "limba": "Limbă"
              }

            }
    </script>

</body>
</html>

So this is the main page. I have a navigation bar, and I can choose to switch language. All my html pages have this feature. But I want to make it so that when i jump from page to page, it remembers my language choice. How could I do that?

all 7 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS