JS - multilanguage

revision:


Content

select your language / selecteer uw taal / 选择你的语言 select a language / selecteer een taal / 选择语言 select language / selecteer taal / 选择语言


select your language / selecteer uw taal / 选择你的语言

top
example:

Smart city - Shanghai

Becoming a smart city will reshape the future of Shanghai in health care, transport, open data and cybersecurity, the local industry regulator said on Thursday.Several dozen experience events will be held next month during Shanghai Smart City Week from December 2, the city's economy and information technology commission said.Shanghai has set up a city-level smart city promotion team to achieve the target with new technologies including artificial intelligence (AI) and 5G. They will improve the city's urban management level and improve people's daily lives, according to the commission, helping Shanghai to become an “AI highland” nationwide and globally.

Slimme stad - Shanghai

Het worden van een slimme stad zal de toekomst van Shanghai op het gebied van gezondheidszorg, vervoer, open data en cyberbeveiliging veranderen, zei de lokale industrieregulator donderdag. Enkele tientallen ervaringsevenementen zullen volgende maand worden gehouden tijdens de Shanghai Smart City Week vanaf 2 december, zei de commissie economie en informatietechnologie van de stad. Shanghai heeft een team voor slimme stadspromotie op stadsniveau opgezet om het doel te bereiken met nieuwe technologieën zoals kunstmatige intelligentie (AI) en 5G. Ze zullen het stedelijk managementniveau van de stad verbeteren en het dagelijks leven van mensen verbeteren, volgens de commissie, waardoor Shanghai een "AI-hoogland" kan worden in het hele land en wereldwijd.

智慧城市 - 上海

上海行业监管机构周四表示,成为智慧城市将重塑上海在医疗、交通、开放数据和网络安全方面的未来。上海经济和信息化委员会表示,从12月2日起,上海智慧城市周期间将举办数十场体验活动。上海成立了一个市级智慧城市推广团队,以利用人工智能(AI)和5G等新技术实现这一目标。该委员会表示,这些举措将提高上海的城市管理水平,改善人们的日常生活,帮助上海成为全国乃至全球的“人工智能高地”.

code:
                <div>
                    <div class="language">
                        <button onclick="document.body.className='english'">English</button>
                        <button onclick="document.body.className='nederlands'">Nederlands</button>
                        <button onclick="document.body.className='chinese'">中文</button> 
                    </div>
                    <h3 class="english" lang="en">Smart city - Shanghai</h3>
                    <p class="english" lang="en">Becoming a smart city will ..“AI highland” nationwide and globally.</p>
                    <h3 class="nederlands" lang="nl">Slimme stad - Shanghai</h3>
                    <p class="nederlands" lang="nl">Het worden van een slimme stad zal .. in het hele land en wereldwijd.</p>
                    <h3 class="chinese" lang="zh-Hans">智慧城市 - 上海</h3>
                    <p  class="chinese" lang="zh-Hans">上海行业监管机构周四表示..上海成为全国乃至全球的“人工智能高地”.</p>
                </div>
                <style>
                    body.english h3[lang="nl"]{display:none;}
                    body.english p[lang="nl"]{display:none;}
                    body.english h3[lang="zh-Hans"]{display:none;}
                    body.english p[lang="zh-Hans"]{display:none;}
        
                    body.nederlands h3[lang="en"]{display:none;} 
                    body.nederlands p[lang="en"]{display:none;} 
                    body.nederlands h3[lang="zh-Hans"]{display:none;} 
                    body.nederlands p[lang="zh-Hans"]{display:none;} 
        
                    body.chinese h3[lang="en"]{display:none;} 
                    body.chinese p[lang="en"]{display:none;} 
                    body.chinese h3[lang="nl"]{display:none;} 
                    body.chinese p[lang="nl"]{display:none;} 
        
                </style>
            


select a language / selecteer een taal / 选择语言

top
example:
code:
            <div>
                <div class="language">
                    <button onclick="English2()">English</button>
                    <button onclick="Nederlands2()">Nederlands</button>
                    <button onclick="Chinese2()">中文</button> 
                </div>
                <h3 class="english1" lang="en" style="display:none;">smart city - Shanghai</h3>
                <p class="english1" lang="en" style="display:none;">Becoming a smart ... and globally.</p>
                <h3 class="nederlands1" lang="nl" style="display:none;">slimme stad - Shanghai</h3>
                <p class="nederlands1" lang="nl" style="display:none;">Het worden van een slimme stad ...en wereldwijd.</p>
                <h3 class="chinese1" lang="zh-Hans" style="display:none;">智慧城市 - 上海</h3>
                <p  class="chinese1" lang="zh-Hans" style="display:none;">上海行业监管机构周四..智能高地”.</p>
            </div>
            <script>
                function Nederlands2() {
                    let nl = document.getElementsByClassName("nederlands1");
                        nl[0].style.display == "flex" ? nl[0].style.display = "none" : nl[0].style.display = "flex"; 
                        nl[1].style.display == "flex" ? nl[1].style.display = "none" : nl[1].style.display = "flex"; 
                        nl[2].style.display == "flex" ? nl[2].style.display = "none" : nl[2].style.display = "flex"; 
                    
                }
                function English2() {
                    let en = document.getElementsByClassName("english1");
                        en[0].style.display == "flex" ? en[0].style.display = "none" : en[0].style.display = "flex"; 
                        en[1].style.display == "flex" ? en[1].style.display = "none" : en[1].style.display = "flex"; 
                        en[2].style.display == "flex" ? en[2].style.display = "none" : en[2].style.display = "flex"; 
                        
                }
                function Chinese2() {
                    let cn = document.getElementsByClassName("chinese1");
                        cn[0].style.display == "flex" ? cn[0].style.display = "none" : cn[0].style.display = "flex"; 
                        cn[1].style.display == "flex" ? cn[1].style.display = "none" : cn[1].style.display = "flex"; 
                        cn[2].style.display == "flex" ? cn[2].style.display = "none" : cn[2].style.display = "flex"; 
                        
                }
            </script>
        

select language / selecteer taal / 选择语言

top
example:
languages to select:
code:
            <div>
                <div class="select">
                    <legend>languages to select:
                        <input type="button" name="taal" id="nl" value="Nederlands" onclick="Nederlands3()">
                        <input type="button" name="taal" id="en" value="English" checked="checked" onclick="English3()">
                        <input type="button" name="taal" id="cn" value="中文" onclick="Chinese3()">
                    </legend>
                </div>
                <h3 class="english3" lang="en" style="display:none;">smart city - Shanghai</h3>
                <p class="english3" lang="en" style="display:none;">Becoming a smart city .. and globally.</p>
                <h3 class="nederlands3" lang="nl" style="display:none;">slimme stad - Shanghai</h3>
                <p class="nederlands3" lang="nl" style="display:none;">Het worden van een slimme stad.. wereldwijd.</p>
                <h3 class="chinese3" lang="zh-Hans" style="display:none;">智慧城市 - 上海</h3>
                <p  class="chinese3" lang="zh-Hans" style="display:none;">上海行业监管机构..高地”.</p>
            </div>
            <style>
                .select{ margin-top: 0.5vw; padding: 0; text-decoration: none; width: 90%;position: relative;
                    border-right: 0.1vw solid black;}
                legend{display: flex; flex-flow: row nowrap; color: crimson; font-size: 1.15vw; 
                    justify-content: space-around;width: 100%;border: 0.25vw solid black; background: 
                    repeating-conic-gradient(blue 0 13deg, green 0 26deg, grey 0 39deg);}
                input{display: flex;justify-content: space-evenly; background-color: transparent; 
                    margin-top: 0.25vw;text-decoration: none; border: none; font-size: 1.15vw; color: 
                    burlywood; cursor: pointer;}
            </style>
            <script>
                function Nederlands3() {
                    var x, y, z, i;
                    x = document.querySelectorAll(".nederlands3");
                        for (i = 0; i < x.length; i++) {
                            x[i].style.display = "flex";
                        }
                    y = document.querySelectorAll(".english3");
                        for (i = 0; i < y.length; i++) {
                            y[i].style.display = "none";
                        }
                    z = document.querySelectorAll(".chinese3");
                        for (i = 0; i < z.length; i++) {
                            z[i].style.display = "none";
                        }
                    }
                function English3() {
                    var xx, xy, xz, i;
                    xx = document.querySelectorAll(".nederlands3");
                        for (i = 0; i < xx.length; i++) {
                            xx[i].style.display = "none";
                        }
                    xy = document.querySelectorAll(".english3");
                        for (i = 0; i < xy.length; i++) {
                            xy[i].style.display = "flex";
                        }
                    xz = document.querySelectorAll(".chinese3");
                        for (i = 0; i < xz.length; i++) {
                            xz[i].style.display = "none";
                        }
                }
                function Chinese3() {
                    var yx, yy, yz, i;
                    yx = document.querySelectorAll(".nederlands3");
                        for (i = 0; i < yx.length; i++) {
                            yx[i].style.display = "none";
                        }
                    yy = document.querySelectorAll(".english3");
                        for (i = 0; i < yy.length; i++) {
                            yy[i].style.display = "none";
                        }
                    yz = document.querySelectorAll(".chinese3");
                        for (i = 0; i < yz.length; i++) {
                            yz[i].style.display = "flex";
                        }
                }
            </script>