'How to change the font of paragraph text when using document.getElementById("").innerHTML?

I am building a transcript based off user input and I was wondering if anyone could point me in the right direction of how I might be able to change the font-style of the strings stored in text_to_add_one and text_to_add_two.

if (build_transcript) {
    var text_to_add_one = "<b>" + "YOU: " + "</b>" + `${transcript_you}`;
    var text_to_add_two = "<b>" + "COMPUTER: " + "</b>" + `${transcript_computer}`; 
    document.getElementById("wordsIncluded").innerHTML += "<p>" + text_to_add_one + "</p>" + "<p>"+ text_to_add_two + "</p>" + "</br>";
   build_transcript = false;
}

//wordsIncluded is a div

I have tried the approach below but it doesn't seem to work!

 document.getElementById("wordsIncluded").innerHTML += "<p id="changeFont">" + text_to_add_one + "</p>" + "<p id="changeFont">" + text_to_add_two + "</p>" + "</br>";

CSS FILE

#changeFont {
      font-style: 'Quicksand';
}
javascripthtmlcssstringfonts


Solution 1:[1]

Try some thing like below.

const transcript_you = "me";
const transcript_computer = "mac";

var text_to_add_one = `<b>YOU: </b>${transcript_you}`;
var text_to_add_two = `<b>COMPUTER: </b>${transcript_computer}`;

document.getElementById(
  "wordsIncluded"
).innerHTML += `<p class="changeFont">${text_to_add_one}</p><p class="changeFont">${text_to_add_two}</p></br>`;
p.changeFont {
  color: red;
}
<div id="wordsIncluded"></div>

Solution 2:[2]

You should not use "<p id="changecolor">". As the code coloring shows, it does not matter part of the string. You should use "<p id=\"changecolor\">" or '<p id="changecolor">'

Solution 3:[3]

you need to use single quotes .

document.getElementById("wordsIncluded").innerHTML += '<p id="changeFont">' + text_to_add_one + '</p>' + '<p id="changeFont">' + text_to_add_two + '</p>' + '</br>';

Solution 4:[4]

This also works by the way and I'll probably use this just because I can see what font-family I will be using:

document.getElementById("wordsIncluded").innerHTML += `<p style="font-family: 'Quicksand'; class="changeFont">${text_to_add_one}</p><p style="font-family: 'Quicksand'; class="changeFont">${text_to_add_two}</p></br>`;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Siva K V
Solution 2 user17517503
Solution 3 ankit singh
Solution 4 spin99

Related Questions