How can I revert the page to original after I've clicked a button?

Question

I have this Arabic to English buttons that changes the entire page to Arbic format and vice versa using a function that targets every element.

The page starts in Arabic format and when the english btn is pressed this function is performed :

function englishPage()
{
    document.getElementById('taskForm').style.gap = '6px'
    document.querySelector('.title').style.padding = '0 6px'
    document.getElementById('taskinput').setAttribute('placeholder','Have Any New Tasks ?')
    document.getElementById('taskinput').style.fontFamily = "Shantell Sans"
    document.getElementById('tsk-sub-btn').setAttribute('value','Add')
    document.getElementById('tsk-sub-btn').style.fontFamily = "Shantell Sans"
    document.getElementById('tsk-arc-btn').setAttribute('value','Archive')
    document.getElementById('tsk-arc-btn').style.fontFamily = "Shantell Sans"
    document.getElementById('navele1').innerHTML = "Tasks"
    document.getElementById('navele1').style.fontFamily = "Shantell Sans"
    document.getElementById('navele2').innerHTML = "Archived Tasks"
    document.getElementById('navele2').style.fontFamily = "Shantell Sans"
}

But I want when i press the Arabic button back the page reverts to its original form.

I have tried reverting everything in the way I did it to the english Format. But that takes too much time.

Is there a way to do it easier ?

See this on how to reload CSS without reloading the page: https://stackoverflow.com/q/2024486/10875738. You could even have two seperate CSS fils with this, one english/latin and one arabic. — Torge Rosendahl, Mar 16 '23 at 12:56

score 1 · Answer 1 · answered Mar 16 '23 at 12:34

To simplify switching between Arabic and English formats:

Store original styles and attributes in an object.
Create functions to apply English styles and attributes, and revert to original styles and attributes.
Add event listeners to toggle between these functions when the corresponding buttons are clicked.

Below is the sample code in JS to do it:

// Store the original styles and attributes
const originalStyles = {
    taskFormGap: document.getElementById('taskForm').style.gap,
    titlePadding: document.querySelector('.title').style.padding,
    taskInputPlaceholder: document.getElementById('taskinput').getAttribute('placeholder'),
    taskInputFontFamily: document.getElementById('taskinput').style.fontFamily,
    // ... add other original styles and attributes here
};

// Apply the English styles and attributes
function englishPage() {
    // ... your existing englishPage() function code
}

// Revert to the original styles and attributes
function arabicPage() {
    document.getElementById('taskForm').style.gap = originalStyles.taskFormGap;
    document.querySelector('.title').style.padding = originalStyles.titlePadding;
    document.getElementById('taskinput').setAttribute('placeholder', originalStyles.taskInputPlaceholder);
    document.getElementById('taskinput').style.fontFamily = originalStyles.taskInputFontFamily;
    // ... revert other styles and attributes here
}

// Event listener for the buttons
document.getElementById('englishBtn').addEventListener('click', englishPage);
document.getElementById('arabicBtn').addEventListener('click', arabicPage);

How can I revert the page to original after I've clicked a button?

1 Answers1