Переключение между языками с помощью JS ⇐ CSS

[Anonymous]

Я пытаюсь создать веб-сайт, на котором можно переключать языки с английского на французский, нажимая кнопку переключения. Я попробовал несколько способов без Javascript, потому что мало что знаю, и только с CSS, но так и не нашел желаемого результата.
Только добро пожаловать! меняется на «yoohoo les nazes», но остальное не меняется.
Кто-нибудь может помочь?

Код: Выделить всё

document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.title', '.1', '.2', '.3', '.4', '.5').textContent = data[event.currentTarget.checked ? 'francais' : 'english'].title;
.1;
});
var data = {
"english": {
"title": "welcome!",
"1": "My work is primarily inspired by nature.",
"2": "Each creation is unique.",
"3": "The white porcelain I use",
"4": "I studied and graduated",
"5": "I wish to thank"
},
"francais": {
"title": "yoohoo les nazes",
"1": "Mon travail est d'abord inspiré sur la nature.",
"2": "chaque création est unique.",
"3": "La porcelaine blanche que j'utilise",
"4": "j'ai étudiée et sui diplômée",
"5": "j'aimerai remercier"
}
}

Код: Выделить всё

.switch {
position: relative;
display: inline-block;
width: 80px;
height: 34px;
}

.switch input {
display: none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: brown;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider {
background-color: burlywood;
}

input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(45px);
}

.slider {
border-radius: 34px;
}

.slider:before {
border-radius: 50%;
}

.on {
display: none;
}

.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked+.slider .on {
display: block;
}

input:checked+.slider .off {
display: none;
}

Код: Выделить всё

EN
FR


[list]

welcome!
My work is primarily inspired by nature.
Each creation is unique.
The white porcelain I use
I studied and graduated
I wish to thank

[/list]

Подробнее здесь: https://stackoverflow.com/questions/786 ... es-with-js