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

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';
}

CodePudding user response：

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>';

CodePudding user response：

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 >${text_to_add_one}</p><p >${text_to_add_two}</p></br>`;

p.changeFont {
  color: red;
}

<div id="wordsIncluded"></div>

CodePudding user response：

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">'

CodePudding user response：

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'; >${text_to_add_one}</p><p style="font-family: 'Quicksand'; >${text_to_add_two}</p></br>`;