This JavaScript code toggles between two languages (English and Turkish) on a webpage:
- Array
elementsListEN
: Contains elements and their English text. detectBrowserLanguage
: Checks browser language to switch to English if not Turkish.checkURLAndUpdateLanguage
: Checks if the URL has a parameter to switch to English.- Event Listener: A button toggles #en between the two languages on click.
const elementsListEN = [ { selector: '#brxe-pdjhlt', text: 'CHAPTERS' }, { selector: '#brxe-lchmrm', text: 'CONTACT' }, { selector: '#en', text: 'TR' }, { selector: '#brxe-htvhiq', text: 'INFO: This book is published in 2012. The contents are still valid but it does not include modern WordPress Block Theme programming.' }, { selector: '#brxe-xcynco', text: 'WordPress Theme Design and Programming' }, { selector: '#brxe-wltsgh', text: 'With this book, you will discover how you can create news sites, blogs, corporate websites and more with WordPress, one of the most popular content management systems in the world!' }, { selector: '#brxe-hbyiel', text: 'BUY BOOK' }, { selector: '#brxe-kcrvnc', text: 'BUY E-BOOK' }, { selector: '#brxe-zgtgiz', text: 'DOWNLOAD PDF' }, { selector: '#brxe-yjachr', text: 'DOWNLOAD FILES.zip' }, { selector: '#brxe-kqhrrf p', text: 'PAGES' }, { selector: '#brxe-rmanok p', text: 'CHAPTERS' }, { selector: '#brxe-czdaha', text: 'Contents of the book and main chapters' }, { selector: '#brxe-qputth p', text: 'SALES' }, { selector: '#brxe-oiubqd', text: 'CHAPTERS' }, { selector: '#brxe-trgkvj h2', text: 'Login to WordPress' }, { selector: '#brxe-trgkvj p', text: 'What is a Content Management System?\nWhat is WordPress?\nA Brief History of WordPress\nWhere Does WordPress Get Its Power From?\nWhat Can We Do With WordPress' }, { selector: '#brxe-zuddso h2', text: 'How to Install WordPress?' }, { selector: '#brxe-zuddso p', text: 'Free WordPress Site: WordPress.com\nPreparing for a Paid WordPress SiteInstallation' }, { selector: '#brxe-jurmrl h2', text: 'Preparation for Design and Programming' }, { selector: '#brxe-jurmrl p', text: 'Design Program SelectionWhich Program Do I Recommend?\nIDE Program Selection (Coding Tool)' }, { selector: '#brxe-cjkrlp h2', text: 'WordPress Theme Design Structure' }, { selector: '#brxe-cjkrlp p', text: 'WordPress Theme Hierarchy (Structure)\nIncoming Requests and Responding PHP Pages\nThings to Know About Index.php\nAdding Features to Functions.php Theme\nConclusion and Important Details' }, { selector: '#brxe-koppad h2', text: 'WordPress Theme Functions' }, { selector: '#brxe-koppad p', text: 'Function Reference\nThe Loop\nContent Functions Used in the Loop\nAdding Component Support to the Theme\nAdding Menu Support to the Theme\nAdding Comment Section to Inner Pages' }, { selector: '#brxe-ppvewd h2', text: 'Advanced WordPress Theme Functions' }, { selector: '#brxe-ppvewd p', text: 'Featured Image\nCustom Fields\nTaxonomy\nCustom Post Type \nShowing Content by Category \n Posts by Query (Showing Content by Filtering Query Posts) \n Checking Whether the Site is Logged In' }, { selector: '#brxe-yszubk h2', text: 'Blog Design' }, { selector: '#brxe-smxdlh h2', text: 'Coding Blog Design' }, { selector: '#brxe-zamlxw h2', text: 'Corporate Site Design' }, { selector: '#brxe-shufcw h2', text: 'Coding of Corporate Site Design' }, { selector: '#brxe-djltak h2', text: 'Portal Design' }, { selector: '#brxe-dxehpe h2', text: 'Coding of Portal Design' }, { selector: '#brxe-hfthde h2', text: 'WordPress and SEO' }, { selector: '#brxe-geiplk h2', text: 'WordPress and Security' }, { selector: '#iletisim', text: 'CONTACT' }, { selector: '#brxe-jrmerk .bricks-button .text', text: 'SEND' }, { selector: '#brxe-uebtzr', text: 'If you have anything on your mind, you can ask.' } ]; // Temporary array to store the original (Turkish or current) text values let originalTextList = []; // Function to save the original text content before changing it function saveOriginalTextContent() { originalTextList = elementsListEN.map(item => { const element = document.querySelector(item.selector); if (element) { return { selector: item.selector, text: element.textContent }; } return null; }).filter(item => item !== null); // Filter out any null values (if elements were not found) } // Function to update text content of multiple elements based on the provided list function updateTextContent(languageList) { languageList.forEach(item => { const element = document.querySelector(item.selector); if (element) { // If element has an SVG (like #brxe-hbyiel), only change the text and leave the SVG intact if (element.querySelector('svg')) { element.childNodes.forEach(child => { if (child.nodeType === Node.TEXT_NODE) { child.nodeValue = item.text; // Update only the text node, keeping SVG intact } }); } else { // If the text includes \n, replace it with <br> and use innerHTML const updatedText = item.text.replace(/\n/g, '<br>'); element.innerHTML = updatedText; } } }); } // Variable to keep track of the current language (starting with Turkish) let isEnglish = false; // Function to detect the browser language and switch to English if needed function detectBrowserLanguage() { const browserLanguage = navigator.language || navigator.userLanguage; if (browserLanguage.startsWith('tr')) { isEnglish = false; // If the language is Turkish, keep it as Turkish } else { isEnglish = true; // For all other languages, switch to English saveOriginalTextContent(); // Save original (Turkish) texts updateTextContent(elementsListEN); // Switch to English texts } } // Function to check URL parameter and update language accordingly function checkURLAndUpdateLanguage() { const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('en') !== null) { isEnglish = true; saveOriginalTextContent(); // Save original (Turkish) texts updateTextContent(elementsListEN); // Switch to English texts } } // Call functions on page load document.addEventListener('DOMContentLoaded', function() { detectBrowserLanguage(); // Detect the browser's language checkURLAndUpdateLanguage(); // Check URL parameter and update language if needed // Add event listener to the #en button document.querySelector('#en').addEventListener('click', function() { // If switching to English, save the original text content first if (!isEnglish) { saveOriginalTextContent(); // Save original (Turkish) texts updateTextContent(elementsListEN); // Switch to English texts } else { updateTextContent(originalTextList); // Restore the original texts from memory } // Toggle the current language flag isEnglish = !isEnglish; }); });