Set the color of a string variable in JavaScript (element.value) when it appears in html outside of a form

Question

This is a simple example to help with a larger project -

Desired outcome: When you type a name in the form box, a sentence appears with the name included. However, only the name should have the color red, and only in the result (it shouldn't be red when it appears in the form box).

I get an error when I include "nameHere.style.color" in this code:

JS:

function getResponse(){
  var nameHere = document.getElementById("name").value;
  nameHere.style.color = "red";
  var resultValue = "Hello my name is " + nameHere + ", nice to meet you.";
  document.getElementById("result").innerHTML = resultValue;
}

HTML:

 <div class="formclass">
      <label for="name">Input name here</label>
      <input id="name" onchange="getResponse()"></input>
 </div>

<div id="result"></div>

Is there any real way to do what I'm trying to do within JavaScript?

Edit: to emphasize, I really do want to change the color of the variable that takes the element.value - not just the element. And I want it to appear in the result as the color. I can't find anything that allows me to do this correctly.

Kinglish · Accepted Answer · 2022-01-07 19:43:19Z

1

Basically, you apply styles to elements, not raw text. In your code, you are trying to set the style property of a piece of raw text, which doesn't have a style property and therefore is erroring out. In this case, you need to add an element to distinguish your output name. From there, you can either have a class ready (I called this one .theName) and apply the class name to the element or you can just set the style directly (like you were attempting) through script. I show both examples here. The second one uses a setTimeout - which is only to allow a brief delay before changing the color - that is just for illustrative purposes.

function getResponse(){
  let nameHere = document.getElementById("name").value;
  let resultValue = `Hello my name is <span class='theName'>${nameHere}</span>, nice to meet you.`;
  document.getElementById("result").innerHTML = resultValue;

  // or if you want to change the element after it's been written to the page
  setTimeout(() => {
    document.querySelector('.theName').style.color='blue';
  }, 1000);
}

.theName{
color:red;
}

 <div class="formclass">
      <label for="name">Input name here</label>
      <input id="name" onchange="getResponse()"></input>
 </div>

<div id="result"></div>

answered Jan 7, 2022 at 19:43

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack Over a year ago

Thank you! This helps immensely. This seems to be the best option in doing this with very complex (numerous) versions of this in one program.

Jack Over a year ago

To add, I found it even better to declare the variable "nameHere" with the <span> surrounding to begin with and still use " " + nameHere + " ". I don't know if that is bad practice or not, but it cleans it up nicely.

D M · Accepted Answer · 2022-01-07 19:45:02Z

0

Sure, you just need to use an element like span instead of a literal string.

const input = document.getElementById("name");
const result = document.getElementById("result");

function getResponse() {
  
  const name = input.value;
  
  let nameWrapper = document.createElement('span');
  nameWrapper.style.color = 'red';
  nameWrapper.innerText = name;
  
  result.innerHTML = '';
  result.appendChild(document.createTextNode('Hello my name is '));
  result.appendChild(nameWrapper);
  result.appendChild(document.createTextNode(', nice to meet you.'));
}

<div class="formclass">
    <label for="name">Input name here</label>
    <input id="name" onchange="getResponse()">
</div>

<div id="result"></div>

answered Jan 7, 2022 at 19:45

D M

7,3474 gold badges20 silver badges39 bronze badges

Collectives™ on Stack Overflow

Set the color of a string variable in JavaScript (element.value) when it appears in html outside of a form

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related