CODEWITHSUNDEEP
javascripthtmlcss
Sara Ree
Sara Ree

Reputation: 3543

Styling appended text that includes template literals

I want to style a short sentence including a word and a number, created using spans and template literal so we have, for instance, the Review word in red and the template literal in blue, but I can't make the code work:

let slide_launched = 10;
let cardState = document.getElementById("cardState");
cardState.innerHTML = `<span style="color:red" >Review </span><span style="color:blue font-weight:700" >${slide_launched - 1}</span>`;
<div class="containerList">
<ul id="list">

	<li>
		<span>Number:</span>
		<span id="cardState"></span>
	</li>
  
</ul>
</div>

I have tried to separate the innerHTML appending portions of text and style them individually but that doesn't work too:

 let slide_launched = 10;
 let cardState = document.getElementById("cardState");
 
cardState.innerHTML = `<span style="color:red" >Review </span>`;

cardState.innerHTML += `<span style="color:blue font-weight:700" >${slide_launched - 1}</span>`
<div class="containerList">
    <ul id="list">

    	<li>
    		<span>Number:</span>
    		<span id="cardState"></span>
    	</li>
      
    </ul>
    </div>

Upvotes: 0

Views: 371

Answers (1)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4015

You forget to add semicolon:

<span style="color:blue font-weight:700" >${slide_launched - 1}</span>

Change to:

<span style="color:blue;font-weight:700" >${slide_launched - 1}</span>

You need to add semicolon after every property:value;

Upvotes: 3

Related Questions