CODEWITHSUNDEEP
javascripthtml
forsenlol
forsenlol

Reputation: 1

How to get a string of different colors

As a result of the script execution, I have a combined string concatenation of two, how to make the first part of the resulting line colored red, and the second blue

function generateFullName() {
  var elem1 = document.getElementById('fName').value;
  var elem2 = document.getElementById('lName').value;

  document.getElementById('fullName').innerText = elem1 + ' ' + elem2;
}
First Name
<param type="text" id="fName" onkeyup="generateFullName()" class='tsvet' value="2" /><br/> Last Name
<param type="text" id="lName" onkeyup="generateFullName()" value="354" /><br/> Full Name <span id="fullName" class='tsvet' />

<body onload="generateFullName();"> </body>

Upvotes: 0

Views: 66

Answers (1)

Roy Bogado
Roy Bogado

Reputation: 4452

Use innerHTML instead innerText

function generateFullName() {
  var elem1 = document.getElementById('fName').value;
  var elem2 = document.getElementById('lName').value;

  document.getElementById('fullName').innerHTML = '<span style="color:red">' + elem1 + '</span><span style="color:blue"> ' + elem2 + '</span>';
}
First Name
<param type="text" id="fName" onkeyup="generateFullName()" class='tsvet' value="2" /><br/> Last Name
<param type="text" id="lName" onkeyup="generateFullName()" value="354" /><br/> Full Name <span id="fullName" class='tsvet' />

<body onload="generateFullName();"> </body>

Upvotes: 3

Related Questions