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;
});
});