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

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 >
      <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.

CodePudding user response：

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 >
      <label for="name">Input name here</label>
      <input id="name" onchange="getResponse()"></input>
 </div>

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

CodePudding user response：

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 >
    <label for="name">Input name here</label>
    <input id="name" onchange="getResponse()">
</div>

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