how can i bold part of the text with js

Viewed 45

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",
                    },
2 Answers

Put the variable in an html element (I assume you're already doing that), then give your element an ID (let's say "myelement"). Then use code like:

document.getElementById("myelement").style.fontWeight = "bold";

Create an inner div/tag for just the text you want to be bold. Then you can apply custom styling to that text using style from document.getElementById

Related