I'm doing the language translation of the html page with js. but I can't bold the sentence it takes in quotes because I'm using the "variable" code. I added the tag inside and outside the apostrophes, but it still didn't work. how can I do that.
For example, I am using a translation system in the script codes below. And again, when I use the text I bolded with in the main language in the menu section in the code sample, with the translation and the texts below, doesn't work and I can't type in bold.
<nav id="menu">
<div class="inner">
<h2>Menu</h2>
<ul class="links">
<li class="content"><a href="terms-of-use" class="terms" hreflang="en"><b>Terms of Use</b></a></li>
<li class="content"><a href="privacy-policy" class="privacy" hreflang="en"><b>Privacy Policy</b></a></li>
<li class="content"><a href="faq" class="faq" hreflang="en"><b>FAQ</b></a></li>
</ul>
<a href="#" class="close">Close</a>
</div>
</nav>
<script>
const langEl = document.querySelector('.langWrap');
const link = document.querySelectorAll('a');
const foottEl = document.querySelector('.foott');
const footcEl = document.querySelector('.footc');
const termsEl = document.querySelector('.terms');
const privacyEl = document.querySelector('.privacy');
const faqEl = document.querySelector('.faq');
const nameEl = document.querySelector('.name');
const mailEl = document.querySelector('.mail');
const mesEl = document.querySelector('.mes');
const conmEl = document.querySelector('.conm');
const condEl = document.querySelector('.cond');
const contEl = document.querySelector('.cont');
const confEl = document.querySelector('.conf');
const coniEl = document.querySelector('.coni');
const conyEl = document.querySelector('.cony');
const conlEl = document.querySelector('.conl');
const exploreEl = document.querySelector('.explore');
const browseEl = document.querySelector('.browse');
const sendEl = document.querySelector('.send');
link.forEach(el => {
el.addEventListener('click', () => {
langEl.querySelector('.active').classList.remove('active');
el.classList.add('active');
const attr = el.getAttribute('language');
foottEl.textContent = data[attr].foott;
footcEl.textContent = data[attr].footc;
termsEl.textContent = data[attr].terms;
privacyEl.textContent = data[attr].privacy;
faqEl.textContent = data[attr].faq;
nameEl.textContent = data[attr].name;
mailEl.textContent = data[attr].mail;
mesEl.textContent = data[attr].mes;
conmEl.textContent = data[attr].conm;
condEl.textContent = data[attr].cond;
contEl.textContent = data[attr].cont;
confEl.textContent = data[attr].conf;
coniEl.textContent = data[attr].coni;
conyEl.textContent = data[attr].cony;
conlEl.textContent = data[attr].conl;
exploreEl.textContent = data[attr].explore;
browseEl.textContent = data[attr].browse;
sendEl.textContent = data[attr].send;
});
});
var data = {
"german":
{
"foott": "IN VERBINDUNG BLEIBEN",
"footc": "Haben Sie irgendwelche Probleme? Haben Sie Vorschläge? Wir würden uns freuen, von Ihnen zu hören! Sie erreichen uns hier.",
"terms": "NUTZUNGSBEDINGUNGEN",
"privacy": "DATENSCHUTZ-BESTIMMUNGEN",
"faq": "FAQ",
"explore": "ERKUNDE MEHR",
"name": "NAME*",
"mail": "E-MAIL*",
"mes": "BOTSCHAFT*",
"conm": "Sag Hallo!",
"cond": "Treffen wir uns auf Discord!",
"cont": "Folge uns auf Twitter",
"conf": "Folge uns auf Facebook",
"coni": "Folge uns auf Instagram",
"cony": "Auf Youtube ansehen",
"conl": "Folgen Sie uns auf LinkedIn",
"browse": "ALLES DURCHSUCHEN",
"send":"NACHRICHT SENDEN",
},